I am trying to do media query on the "about" page of my website but I seem to have an issue. In the original CSS, I divided "information" into 2 columns and left right padding so the window doesn't flow all the way to the screen. However, When doing media query, the padding and the grid stays the same which gave my website extra space on the right that I don't want. I was wondering how I can change that?
I've tried changing those property inside of media query but it doesn't seem to affect the website at all. I've tried: 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;
}
}
Aucun commentaire:
Enregistrer un commentaire