Jump to content

Sections overlapping on mobile

Recommended Posts

Site URL: https://parakeet-ruby-46jt.squarespace.com/

Hi there 👋

I'm quite new to custom CSS but I've managed to pull together enough to get the display I want on desktop but it's stuffing up when it switches to mobile.

Section 1 is an autoplay slideshow.

Section 2 is the overlapping text for the slideshow.

Section 3 is three posters with button links

So on desktop, it looks like this (which is what I want):


But on mobile, I want the slideshow with overlapping text to be on top of the three posters. Basically like this but without the sections overlapping:


The problem I'm facing on mobile:

The first poster overlaps the slideshow.

The third poster overlaps the footer. 

CSS used:

1. <style>#page .page-section{height:100vh}
2. #page .page-section:nth-child(2) {margin-top:-100vh;}
3. #page .page-section:nth-child(2) , #page .page-section:nth-child(2) .section-background{background-color:transparent!important}
4. @media only screen and (min-width: 641px){
5. #page .page-section{width: 70%; height: 110vh; align-items: center; float: left}
6. #page .page-section:nth-child(3) {margin-top:-100vh;}
7. #page .page-section:nth-child(3) {width: 30%; height: 100vh; align-items: center}
8. #page .page-section:nth-child(3) , #page .page-section:nth-child(3) .section-background{background-color:transparent!important}
9. </style>


Hopefully this makes sense. Any advice would be great. 


Link to comment
  • Replies 3
  • Views 783
  • Created
  • Last Reply


This topic is now archived and is closed to further replies.

  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.