Seems that for some reason that I can’t figure out I am unable to get the footer to be formatted properly for desktop devices.
While using the media query:
@media screen and (min-width: 768px) {
.footer__sections {
grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}
}
I am still unable to get the grid to change templates.
Here is the code for the item in the footer section:
<section class="collapsible collapsible--expanded footer__section">
<header class="collapsible__header">
<h2 class="collapsible__heading footer__heading">Item 1</h2>
</svg><svg class="icon icon--white collapsible__chevron">
<use xlink:href="images/sprite.svg#chevron"></use>
</svg>
</header>
<div class="collapsible__content">
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Molestiae, dolore.
</div>
</section>
</div>
