CSS-Grid Layout Issues! (Images Not Vertically Stacking For Small Screens And Reverting to Horizontal Layout for Bigger Screens)

CSS-Grid Layout Issues! (Images Not Vertically Stacking For Small Screens And Reverting to Horizontal Layout for Bigger Screens)
0

#1

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!

html

The image below is how it should be on mobile screens:
CSS-Grid%20crisis

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!


#2

Usually i just switch my display to flex when i want to have vertical layouts because it is done with two lines of css, display= flex and flex-direction = column
I haven’t cracked yet how to make css grid work for a single column of stuff…


#3

@habar1st, where in my css code should I insert it?


#4

Do you still want me to respond to this? (I just responded to your other thread I think so all you have to do is apply the same flex layout to your display inside the media section for the smaller screen. inside the .which-one-are-you container i believe)


#5

Oh ok…thanks @hbar1st…I need to research some more CSS-grid layout stuff though…because my whole goal is to use CSS-Grid for it, because it’s the new hot CSS technology out :thinking::neutral_face:


#6

You don’t need a mediaquery to do this in css grid.

Here is some code that I have used:

.invcontainer {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(38ch, 1fr));
	grid-gap: 5px;
}
.invitem {
	background-color: aliceblue;
	border-radius: 20px;
	padding: 10px;
	justify-content: flex-start;
	text-align: left;
}
<div class="invcontainer"> 
    <div class="invitem">
           Item 1
    </div>
    <div class="invitem">
           Item 2
    </div>
    <div class="invitem">
           Item 3
    </div>
</div

You can use any different unit of measure in the min max that you wish.

I am testing that code on one of my sites. It shows my inventory. I have a big monitor and it will show 7 wide on my monitor, and as the screen gets smaller and smaller, will expand and contract to fit and when it gets to the the narrowest setting, it will only be one column.
https://www.texaslonghorn.com/inventory/index2.cfm?con=all2&breedcode=T


#7

@kirkdickinson, I will definitely check this out too! Thanks!!!