Hi,
I’m trying to get a section to have it’s children to scroll horizontally on mobile.
Here’s my HTML/CSS
/* Base styles for the grid */ .grid-container { display: flex; overflow-x: auto; /* Enable horizontal scrolling on smaller screens */ scroll-snap-type: x mandatory; /* Scroll snap to align with columns */ } .grid-item { flex: 0 0 33.33%; /* Set equal width for 3 columns */ min-width: 300px; /* Minimum width to prevent excessive shrinking */ height: 200px; /* Set the height as required */ margin: 5px; /* Add some spacing between the columns */ scroll-snap-align: center; /* Align each column with the container */ } /* Media query for mobile screens */ @media screen and (max-width: 767px) { .grid-item { flex-basis: 50%; /* Show only 2 columns on mobile screens */ } }If I just put that in code box it works. If I try to recreate the structure with a section, container and blocks. I cannot get it to work.
Here’s the page where I’m testing this: https://bricks.skinbase.co.uk/intense-pulsed-light/ The coloured blocks is the dropped into a code box. The bit underneath is where I have tried in vain to replicate using section, container and blocks. I’ve tried so many versions I’m not even sure anymore which this one is.
I’ve tried putting all of the CSS in the container’s CSS box.
I’ve tried putting the grid-items CSS in the individual blocks in a class
I’m totally stumped.