Jump to content

Help! Custom CSS split screen for mobile, text over image.

Recommended Posts

  • Replies 4
  • Views 731
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Posted (edited)

Try adding this to custom CSS:

@media screen and (min-width:100px) and (max-width: 766px){
#block-yui_3_17_2_1_1605359993959_17868 {
margin-top:180px;
}
}

Also, I couldn't help but notice this. A normal squarespace website (including yours) collapse to tablet/mobile mode at width 798px (the navigation menu will collapse).  But your about section collapses to tablet/mobile mode only at 766px. It is not going to do any harm, I just thought it was worth a mention.

Edited by aravsanj
Posted

Hello,

Just glancing over your code, I think a stable and less-bloated edit to same custom CSS that you already applied would be correcting some of the coding errors and applying the following fix:

@media screen and (max-width: 767px){
.section-background {
height: 300px;
position: relative;
}

 

Hope this helps,

-Dan

  • 1 year later...
Posted

Hello, I have the same issue on mobile. On desktop the split screen works perfectly but on mobile text is over the image. I need the text to be below the image. All the split designs are now broken on mobile. My website : https://zeynaagency.com/ 

Could you please help ? Here the code I used  :

section[data-section-id="63514b39bf5a053a82731917"]{
  @media only screen and(min-width:767px){
    .section-background{
      width:50%;
      margin-left:50%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50% !important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:500px;
    }
  }
}

Thanks

 

Capture d’écran 2022-11-13 à 14.17.09.png

Capture d’écran 2022-11-13 à 14.17.03.png

Capture d’écran 2022-11-13 à 14.16.55.png

Posted
On 11/13/2022 at 9:13 PM, juliettebcr said:

Hello, I have the same issue on mobile. On desktop the split screen works perfectly but on mobile text is over the image. I need the text to be below the image. All the split designs are now broken on mobile. My website : https://zeynaagency.com/ 

Could you please help ? Here the code I used  :

section[data-section-id="63514b39bf5a053a82731917"]{
  @media only screen and(min-width:767px){
    .section-background{
      width:50%;
      margin-left:50%;
    }
    .content-wrapper {
      width:50%;
      margin-right:50% !important;
    }  
  }
  @media(max-width:767px){
    display:block;
    .section-background, .content-wrapper{
      position:relative;
    }
    .section-background{
      height:500px;
    }
  }
}

Thanks

 

Capture d’écran 2022-11-13 à 14.17.09.png

Capture d’écran 2022-11-13 à 14.17.03.png

Capture d’écran 2022-11-13 à 14.16.55.png

You can consider using 2 sections, instead of 1, then we can give the code to make them show side by side on desktop only.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Create an account or sign in to comment

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


×
×
  • 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.