Я пытаюсь выполнить медиа-запрос на странице "about" моего сайта, но у меня, похоже, есть проблема.В оригинальном CSS я разделил «информацию» на 2 столбца и оставил отступ справа налево, чтобы окно не доходило до экрана.Однако при выполнении медиазапроса отступы и сетка остаются прежними, что дает моему веб-сайту дополнительное пространство справа, что мне не нужно.Мне было интересно, как я могу это изменить?
Я пытался изменить это свойство внутри медиазапроса, но, похоже, оно никак не влияет на веб-сайт.Я пробовал: grid-template-columns: repeat (1,1fr) padding-right: 0px;
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Portfolio</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="css/main.css" />
<link rel="stylesheet" href="https://unpkg.com/@blaze/css@3.2.0/dist/blaze.css">
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">
<script src="https://unpkg.com/@blaze/atoms@6.1.0/dist/blaze-atoms.js"></script>
<script src="javascript/main.js"></script>
<script src="javascript/jquery.js"></script>
</head>
<body>
<div class="cotainer">
<div class="title">
About Me!
</div>
<div class="information">
<div class="span-row-2">
<img src="images/profile.svg" id="logo">
</div>
<div class="tabs">
<input type="radio" name="tabs" id="tabone" checked="checked">
<label for="tabone">Education</label>
<div class="tab">
<h1 class="phrase">San Jose State University</h1>
<blaze-divider class="divider">Major</blaze-divider>
<div class="major">Digital Media Art</div>
</div>
<input type="radio" name="tabs" id="tabtwo">
<label for="tabtwo">Contacts</label>
<div class="tab">
<h1 class="phrase">Stay in touch!</h1>
<blaze-divider class="divider">Get Connected</blaze-divider>
<div class="socials">
<a href="https://www.facebook.com/thanh.truong.3597" class="icons" target="_blank">Facebook</a>
<a href="https://www.instagram.com/thanh_be_like/" class="icons" target="_blank">Instagram</a>
<a href="https://www.linkedin.com/in/thanh-truong-918509163/" class="icons" target="_blank">Linkedin</a>
<a href="creative_resume.pdf" class="icons" target="_blank">Resume</a>
</div>
</div>
</div>
</div>
<nav id="mainnav" class="group">
<div id="menu">≡ Menu</div>
<ul>
<li><a href="about.html" class="active">About</a></li>
<li><a href="index.html">Home</a></li>
<li><a href="portfolio.html">Portfolio</a></li>
</ul>
</nav>
<script>
$(document).ready(function() {
// JQUERY NAV TOGGLE
$('#menu').bind('click',function(event){
$('#mainnav ul').slideToggle();
});
$(window).resize(function(){
var w = $(window).width();
if(w > 768) {
$('#mainnav ul').removeAttr('style');
}
});
});
</script>
</body>
</html>
information {
display: grid;
grid-template-columns: repeat(2, 1fr);
padding-right: 50px;
background:#323526;
padding-bottom: 50%;
}
.span-row-2{
grid-row: span 2 / auto;
align-items: center;
margin:10vw;
}
.tabs {
display: flex;
flex-wrap: wrap;
}
.tabs label {
order: 1;
display: block;
padding: 1rem 3rem;
margin-top:70px;
cursor: pointer;
transition: background ease 0.2s;
width:50%;
text-align: center;
border-bottom: 1px solid #C28710;
color: #C28710;
font-size: 1.5vw;
letter-spacing: 2px;
}
.tabs .tab {
order: 99;
flex-grow: 1;
width: 100%;
display: none;
padding: 1rem;
}
.tab{
border-radius: 0px 0px 20px 20px;
background-color: rgba(0, 0, 0, 0.2);
}
.tabs input[type="radio"] {
display: none;
}
.tabs input[type="radio"]:checked + label {
border-bottom: 4px solid #C28710;
font-weight: bold;
}
.tabs input[type="radio"]:checked + label + .tab {
display: block;
}
@media (max-width: 45em) {
.tabs label,
.tab .tabs {
order: initial;
}
.tabs label {
width: 100%;
margin-right: 0;
margin-top: 2rem;
}
}
@media all and (max-width:650px){
.span-row-2{
grid-row: span 2 / auto;
align-items: center;
margin:40px;
min-width:250px;
min-height: 250px;
grid-area: main;
}
.tabs label {
order: 1;
display: block;
margin-top:20px;
cursor: pointer;
transition: background ease 0.2s;
width:50%;
text-align: center;
border-bottom: 1px solid #C28710;
color: #C28710;
font-size: 15px;
letter-spacing: 2px;
}
.information{
grid-template-columns:repeat(1,1fr);
padding-right:0px;
}
}
Что я получил Желаемый эффект