Recently, I added a Slider to my website officesincambridge.co.uk.
I decided to make the slider go the full width of the page by adjusting the div it was wrapped in:
.custom-slider {
position:absolute; //added
left: 0; //added
width: 100%;}
This change successfully achieved the desired effect, as shown below:
However, I encountered an issue where I had to add margin to elements below the slider to prevent them from going beneath the absolutely positioned slider. I tried using both percentage and pixel margins, which worked well on full-screen view but caused content overlap when viewing on smaller screens like phones. I'm unsure how to address this problem without compromising the appearance on full-screen mode.
Is there a solution or technique that I might be overlooking? Any help would be appreciated. Thanks!