Hi folks! For some reason CSS Grids is kicking my @$$!
Here’s the problem:
I want the images inside my container to stack vertically on mobile phones…anything between say 450px and 320px, but remain laid out horizontally on larger screens…say anything 500px or 700px and above. I have tried rearranging min-width and max-width so many different ways but nothing will work! I just don’t understand it!
The image below is how it should be on mobile screens:
In my current CSS code I have this:
grid-template-columns: 1fr;
grid-template-areas:
"statement1"
"statement2";
Then in my media-query I have this:
@media (min-width: 700px){
.which-one-are-you{
grid-template-columns: 1fr 1fr;
grid-template-areas:
"statement1 statement2";
}
}
So shouldn’t the effect of this be that, for screen-widths above 700px, the images are laid out horizontally? And for screen-widths below that, the images will revert to being vertically stacked?
Here’s my full CSS code:
/* Add a black background color to the top navigation */
.topnav {
background-color: #333;
overflow: hidden;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Add an active class to highlight the current page */
.active {
background-color: #4CAF50;
color: white;
}
/* Hide the link that should open and close the topnav on small screens */
.topnav .icon {
display: none;
}
.container-fluid{
/*border: 1px solid red;*/
width:auto;
position: absolute;
top: 50%;
left: 50%;
margin-right: -50%;
transform: translate(-50%, -50%);
text-align: center;
}
.which-one-are-you{
/*border: 1px solid red;*/
border-radius: 20px;
width: auto;
text-align: center;
margin: auto;
position: relative;
padding: 15px;
/* at all times setup is like this except for where media-queries come in*/
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"statement1"
"statement2";
/* at all times setup is like this except for where media-queries come in*/
font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
text-align: center;
color: hsla(0,0%,20%,1);
text-shadow: hsla(0,0%,40%,.5) 0 -1px 0, hsla(0,0%,100%,.6) 0 2px 1px;
background-color: hsl(0,0%,90%);
box-shadow: inset hsla(0,0%,15%, 1) 0 0px 0px 4px, /* border */
inset hsla(0,0%,15%, .8) 0 -1px 5px 4px, /* soft SD */
inset hsla(0,0%,0%, .25) 0 -1px 0px 7px, /* bottom SD */
inset hsla(0,0%,100%,.7) 0 2px 1px 7px, /* top HL */
hsla(0,0%, 0%,.15) 0 -5px 6px 4px, /* outer SD */
hsla(0,0%,100%,.5) 0 5px 6px 4px; /* outer HL */
transition: color .2s;
}
.which-one-are-you:hover {
box-shadow:
inset hsla(117, 100%, 50%, 1) 0 0px 0px 4px, /* border */
inset hsla(117, 100%, 15%, .8) 0 -1px 5px 4px, /* soft SD */
inset hsla(117, 100%, 40%,.45) 0 -1px 0px 7px, /* bottom SD */
inset hsla(117, 100%, 50%,.7) 0 2px 1px 7px, /* top HL */
hsla(117, 100%, 75%, .8) 0 2px 3px 2px, /* outer SD */
hsla(117, 50%, 40%, .25) 0 -5px 6px 4px, /* outer SD */
hsla(210,80%,95%, 1) 0 5px 6px 4px; /* outer HL (green LED ) */
}
/* Linear ------------------------- */
.which-one-are-you.linear {
height: auto;
border-radius: .5em;
background-image: -webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 6%, hsla(0,0%,100%, .1) 7.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%, 0%,0) 0%, hsla(0,0%, 0%,0) 4%, hsla(0,0%, 0%,.03) 4.5%),
-webkit-repeating-linear-gradient(left, hsla(0,0%,100%,0) 0%, hsla(0,0%,100%,0) 1.2%, hsla(0,0%,100%,.15) 2.2%),
linear-gradient(180deg, hsl(0,0%,78%) 0%,
hsl(0,0%,90%) 47%,
hsl(0,0%,78%) 53%,
hsl(0,0%,70%)100%);
}
.statement1{
width: 306px;
height: 356px;
border: 1px solid blue;
border-radius: 20px;
grid-area: statement1;
}
.Partner{
width: 300px;
height: 300px;
border: 1px solid blue;
border-radius: 20px;
background-image: url(https://s15.postimg.cc/jdgsmfi63/Unknown-41-300x300.jpg);
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.Partner:active {
box-shadow: inset 0px 0px 50px 6px rgba(0,0,0,0.51)
}
.statement2{
width: 306px;
height: 356px;
border: 1px solid blue;
border-radius: 20px;
grid-area: statement2;
}
.User{
width: 300px;
height: 300px;
border: 1px solid blue;
border-radius: 20px;
background-color: #000;
background-image: url(https://s15.postimg.cc/w64wm2bor/a558682b158debb6d6f49d07d854f99f-casual-male-avatar-silhouette-b.png);
background-position: center;
background-repeat: no-repeat;
cursor: pointer;
}
.User:active {
box-shadow: inset 0px 0px 50px 6px rgba(255,255,255,0.51)
}
body{
/*background-color: #9b9b99;*/
background-color: hsla(60,1%,60%,1);
}
/*...............media-queries...............*/
@media (min-width: 700px){
.which-one-are-you{
grid-template-columns: 1fr 1fr;
grid-template-areas:
"statement1 statement2";
}
}
And here’s my html code:
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="Which One Are You2.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="Which One Are You.js"></script>
</head>
<body>
<div class="topnav" id="myTopnav">
<a href="file:///D:/Web%20Development/Open%20Page.html" class="active">Home</a>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>
<div class="container-fluid">
<div class="which-one-are-you linear"><!--Metalic holder-->
<div class="statement1">
<p id="question-1"><!--Are You a Provider/Partner? Login--><a href="#"><!--Here--></a></p>
<div class="Partner">
</div>
</div>
<div class="statement2">
<p id="question-2"><!--Are You a User? Login--><a href="#"> <!--Here--></a></p>
<div class="User">
</div>
</div>
</div>
</div>
</body>
</html>
Thanks in advance for the help!
