I’m having some trouble getting grid columns to work as expected. I tried this out in both Chrome and Firefox with the same results. Basically, the layout doesn’t seem to be changing at the expected breakpoints. Adding “overflow-x: hidden” to the body improved things slightly, but it’s not where I want it to be. What’s odd is that when I test it using the device/mobile testing in Chrome Dev Tools, it behaves exactly as expected. Code follows:
HTML:
<h2>Bands</h2>
<div class="container">
<div *ngFor="let band of bands" class="band-card">
<h3><strong>{{ band.name }}</strong></h3>
<img src="{{ band.pictureUrl }}">
<p><strong>What's their deal?</strong></p>
<p>{{ band.summary }}</p>
<p><strong>Signature Songs</strong></p>
<p>{{ band.signatureSongs }}</p>
<p><strong>Tags</strong></p>
<p>{{ band.subgenres }}</p>
<p><strong>Website</strong></p>
<p>{{ band.website }}</p>
</div>
</div>
and the CSS:
html, body {
background-color: #c2d6d6;
box-sizing: border-box;
font-family: 'Hind', sans-serif;
margin: 0;
padding: 0;
overflow-x: hidden;
}
.container {
display: grid;
grid-template-columns: repeat(4, 20rem);
grid-gap: 2rem;
margin: 3rem;
}
div.band-card {
background-color: #fff;
display: flex;
flex-direction: column;
align-items: center;
padding: 1rem;
}
img {
max-width: 80%;
}
p {
margin-bottom: 0 !important;
word-wrap: break-word;
}
@media screen and (max-width: 1000px) {
.container {
grid-template-columns: repeat(3, 20rem);
margin: 2rem;
}
}
@media screen and (max-width: 700px) {
.container {
grid-template-columns: repeat(2, 20rem);
grid-gap: 1rem;
}
}
@media screen and (max-width: 400px) {
.container {
grid-template-columns: 20rem;
}
}