I'm trying to make my 1 row grid responsive so that it will turn into multiple rows when the screen or window is smaller or shrinks, but I can't seem to figure it out. I have a feeling now that I'm this far into this that making this part of the website a grid may not have been the most optimal thing to to do, but I'm not very experienced in this field, and I'd prefer to keep it a grid for now. Regardless, no matter what I've tried the grid stays 1 row or loses it's formatting. Hopefully someone else has more knowledge in this area they wouldn't mind sharing.
Here is my HTML:
<div class="home-grid-container">
<div class="home-grid-container__slide">
<a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-33"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf33category.jpg" alt="CF-33 Product" title="CF-33 Product Category"></a>
<button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-33">Panasonic CF-33</a></button>
</div>
<div class="home-grid-container__slide">
<a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf54category.jpg" alt="CF-54 Product" title="CF-54 Product Category"></a>
<button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54">Panasonic CF-54</a></button>
</div>
<div class="home-grid-container__slide">
<a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-31"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf31category.jpg" alt="Cf-31 Product" title="CF-31 Product Category"></a>
<button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-31">Panasonic CF-31</a></button>
</div>
<div class="home-grid-container__slide">
<a href="https://www.bobjohnson.com/tablets/?_bc_fsnf=1&Model=FZ-G1"><img src="https://www.bobjohnson.com/product_images/uploaded_images/fzg1category.jpg" alt="FZ-G1 Product" title="FZ-G1 Product Category"></a>
<button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/tablets/?_bc_fsnf=1&Model=FZ-G1">Panasonic FZ-G1</a></button>
</div>
<div class="home-grid-container__slide">
<a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-53"><img src="https://www.bobjohnson.com/product_images/uploaded_images/cf53category.jpg" alt="CF-53 Product" title="CF-53 Product Category"></a>
<button class="homepage-category-button button button--primary"><a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54">Panasonic CF-53</a><button>
</div>
and here is my CSS
.home-grid-container {
background-color: #fff;
display: grid;
grid-template-columns: auto auto auto auto auto;
justify-content: center;
column-gap: 10px;
h3 {
color: #1f588f;
font-weight: 700;
font-size: 15px;
margin: 0 0 0 0;
text-align: center;
vertical-align: top;
}
a {
text-decoration: none;
color: #fff;
}
a:visited {
color: #fff;
}
button {
margin: 1rem 0 1rem;
}
}
.home-grid-container__slide {
max-height: 300px;
max-width: 300px;
}
.homepage-category-button {
width: 12rem;
}
you have to play with the grid-template-columns in the @media
here I defined it in home-grid-container for the smallest. First change is at 600px, after 992....
h3 {
color: #1f588f;
font-weight: 700;
font-size: 15px;
margin: 0 0 0 0;
text-align: center;
vertical-align: top;
}
a {
text-decoration: none;
color: #fff;
}
a:visited {
color: #fff;
}
button {
margin: 1rem 0 1rem;
}
.home-grid-container {
background-color: #fff;
display: grid;
grid-template-columns: repeat(1, 1fr);
justify-content: center;
column-gap: 10px;
}
@media (min-width: 390px) {}
@media (min-width: 600px) {
.home-grid-container {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.home-grid-container {
grid-template-columns: repeat(3, 1fr);
}
}
@media (min-width: 1200px) {
.home-grid-container {
grid-template-columns: repeat(4, 1fr);
}
}
@media (min-width: 1400px) {
.home-grid-container {
grid-template-columns: repeat(5, 1fr);
}
}
.home-grid-container__slide,
.home-grid-container__slide img {
max-height: 300px;
max-width: 300px;
}
.homepage-category-button {
width: 12rem;
}<div class="home-grid-container">
<div class="home-grid-container__slide">
<a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-33">
<img src="https://www.bobjohnson.com/product_images/uploaded_images/cf33category.jpg" alt="CF-33 Product" title="CF-33 Product Category">
</a>
<button class="homepage-category-button button button--primary">
<a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-33">Panasonic CF-33</a>
</button>
</div>
<div class="home-grid-container__slide">
<a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54">
<img src="https://www.bobjohnson.com/product_images/uploaded_images/cf54category.jpg" alt="CF-54 Product" title="CF-54 Product Category">
</a>
<button class="homepage-category-button button button--primary">
<a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54">Panasonic CF-54</a>
</button>
</div>
<div class="home-grid-container__slide">
<a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-31">
<img src="https://www.bobjohnson.com/product_images/uploaded_images/cf31category.jpg" alt="Cf-31 Product" title="CF-31 Product Category">
</a>
<button class="homepage-category-button button button--primary">
<a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-31">Panasonic CF-31</a>
</button>
</div>
<div class="home-grid-container__slide">
<a href="https://www.bobjohnson.com/tablets/?_bc_fsnf=1&Model=FZ-G1">
<img src="https://www.bobjohnson.com/product_images/uploaded_images/fzg1category.jpg" alt="FZ-G1 Product" title="FZ-G1 Product Category">
</a>
<button class="homepage-category-button button button--primary">
<a href="https://www.bobjohnson.com/tablets/?_bc_fsnf=1&Model=FZ-G1">Panasonic FZ-G1</a>
</button>
</div>
<div class="home-grid-container__slide">
<a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-53">
<img src="https://www.bobjohnson.com/product_images/uploaded_images/cf53category.jpg" alt="CF-53 Product" title="CF-53 Product Category">
</a>
<button class="homepage-category-button button button--primary">
<a href="https://www.bobjohnson.com/rugged-laptops/?_bc_fsnf=1&Model=CF-54">Panasonic CF-53</a>
</button>
</div>
</div>