Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Sections overlapping on mobile


twinter

Question

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):

image.thumb.png.41af681edd978bb1d0bb8a984ce231ff.png

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:

image.png.d5b5839b2c14384916307733e37c8916.png

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. 

Thanks!

Link to post
  • Answers 3
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Posted Images

3 answers to this question

Recommended Posts

Create an account or sign in to comment

You need to be a member in order to leave a comment


√ó
√ó
  • Create New...