On my website's "about" page, I'm attempting to implement a media query but encountering an issue. In the original CSS, I structured the "information" section into 2 columns with right padding to prevent the content from extending all the way to the screen edge. However, when applying the media query, the padding and grid layout remain unchanged, creating unnecessary extra space on the right side of the website. How can I adjust this?
I've attempted modifying these properties within the media query, but it doesn't seem to have any effect on the website: 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="395a4a4a790a170b1709">[email protected]</a>/dist/blaze.css">
<link href="https://fonts.googleapis.com/css?family=Didact+Gothic" rel="stylesheet">
<script src="https://unpkg.com/@blaze/ [email protected]/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;
}
}