studiofounded Posted May 13, 2022 Share Posted May 13, 2022 Site URL: https://shark-magenta-t3ap.squarespace.com/contact I have several areas on my site where I have made split screen layouts with CSS. They work well on desktop but not so well on mobile view. How can I set the image to display in a section above the text on mobile view? Thank you! PW: SISUMAY2022 Link to comment
tuanphan Posted May 15, 2022 Share Posted May 15, 2022 You can consider adding 2 sections with first is background image, next is form, then we can give the code to make them side by side on desktop. And on mobile, the image will be always top. -- Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
studiofounded Posted May 15, 2022 Author Share Posted May 15, 2022 9 hours ago, tuanphan said: You can consider adding 2 sections with first is background image, next is form, then we can give the code to make them side by side on desktop. And on mobile, the image will be always top. -- Sounds good! Let's try it 🙂 I've added two new sections to the page so go side by side. Link to comment
tuanphan Posted May 16, 2022 Share Posted May 16, 2022 First, increase Form Section Width. It is too small Next, add this to Design > Custom CSS /* Contact side by side */ @media screen and (min-width:768px) { body#collection-6198f8a8d2e7a906da612f16 article section:nth-child(n+2) { width: 50% !important; float: left !important; } } Email me if you have need any help (free, of course.). Answer within 24 hours. Or send to forum message How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care Link to comment
studiofounded Posted May 16, 2022 Author Share Posted May 16, 2022 9 hours ago, tuanphan said: First, increase Form Section Width. It is too small Next, add this to Design > Custom CSS /* Contact side by side */ @media screen and (min-width:768px) { body#collection-6198f8a8d2e7a906da612f16 article section:nth-child(n+2) { width: 50% !important; float: left !important; } } Perfect! Thank you so much!! Link to comment
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment