Split Screen Layout on Mobile

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

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.

--

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.

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;
}
}

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!!