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

Site URL: https://www.lizziporterdesign.com/

I've split the content and it's all working in desktop but not mobile, nearly there with mobile just need to move the text down off the image.

Help please, got to be one last bit of code but i've tried a few things and it's not working.

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.

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

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

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

 

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.