CSS Grid breaking slider layout

Hi all,

I’m having some problems getting my slider to lay out correctly. It should be 50/50 with the Contact Us/Opening Times section, but I believe that CSS Grid applied on the container “genericpage__body” is causing the image gallery under the heading " Cinema gallery" to push out.

Any thoughts on how to fix this please and still keep grid? I’m stumped…


Many thanks,


Ok I’ve had a quick look at this over lunch and set a temporary inline style to remove grid from the “genericpage__body” element. I’ve also adjusted the grid-template-columns so they are now 50/50 (there’s still an overlap which I think is because of the grid-gap applied).

It’s still not 100% what I was after (I wanted small columns for the “details” and the “opening times” columns, then the rest of the space taken up by the gallery section for desktop. I still can’t figure out why having grid had such an effect on the lower elements either.

https://apexcinemas.andrewcourtney.co.uk/cinemas/exeter/ (note you might need to Ctrl+F5 as my CSS is caching at the moment).

Any ideas please?

I don’t know if this helps or not but I added the below styles and got this result.

grid-template-columns:25% 1fr;
.section__slider-container .swiper-button-next {
.section__slider-container .swiper-button-prev{left:0;}

Thanks as always for your help Paul!

I ended up changing some of the values for the “genericpage–singlecinema__cinemaoverview” and “genericpage–singlecinema__cinemaoverview__details” elements just to give a bit more space with the Opening Hours section and then did some tweaking with the margins generally on the page so everything was a bit more spaced out than what I had before. I knew it had to be something to do with setting overflow for the gallery section - thanks for the tip!


1 Like