Within my project lies a section designed to showcase items in a CSS grid format similar to this:
View the grid with its items here
The markup I used is as follows:
<section class="section-b py-2">
<div class="container">
<h2 class="section-heading">
<span class="section-heading-line"></span>What can we do for you<span class="section-heading-line"></span>
</h2>
<div class="section-b-grid">
<div class="section-b-grid-item-1">
<h3 class="grid-item-number">01</h3>
<strong class="grid-item-title">Complex Detailing</strong>
<p class="grid-item-text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Deserunt, impedit.</p>
</div>
In addition, here is my SCSS code snippet:
.section {
// More styling goes here
}
// Further details might be added later on
I want all .section-b-item classes to share certain styles before customizing them individually (.section-b-item-1 would be nested within &-item as &-1, for instance).
Even after ensuring proper nesting and functionality of the SASS compiler, applying display: none to the &-item selector did not yield desired results. Attempts were made to target the grid item classes directly in the global scope without success.
The discrepancy between the entered markup and SCSS baffles me, causing frustration during the troubleshooting process.