PorterL Posted June 5, 2021 Posted June 5, 2021 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.
Guest Posted June 5, 2021 Posted June 5, 2021 (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 June 5, 2021 by aravsanj
Wolfsilon Posted June 5, 2021 Posted June 5, 2021 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
juliettebcr Posted November 13, 2022 Posted November 13, 2022 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
tuanphan Posted November 21, 2022 Posted November 21, 2022 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. 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!)
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment