CSS Grid breaking slider layout

[Shoxt3r]

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…

https://apexcinemas.andrewcourtney.co.uk/cinemas/exeter/

Many thanks,

Andrew

[Shoxt3r]

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?

[PaulOB]

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

.genericpage--singlecinema__cinemaoverview__gallery,
.section__slider-container{
position:relative;
overflow:hidden;
}
.genericpage--singlecinema__cinemaoverview{
grid-template-columns:25% 1fr;
}
.section__slider-container .swiper-button-next {
right:0;
}
.section__slider-container .swiper-button-prev{left:0;}

[Shoxt3r]

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!

https://apexcinemas.andrewcourtney.co.uk/cinemas/exeter/