Jasper Jin - layout not working on mobile

Site URL: http://helen-wilson-59zq.squarespace.com

I have recently updated my site and installed a new template (Jasper Jin). When toggling between desktop/mobile/tablet at the top while editing styles, the tablet and mobile index defaults to a single column. When I actually visit my website on my phone to check, it is still two by two and doesn't look good. Does anyone know what I am doing wrong or how to resolve this? Thanks

Hi,

You want 1 column on mobile or?

Hey!

Yes! I want two columns on my desktop, then one column on mobile and tablet. It appears to work when I am editing online, but not when I try and view it on my actual mobile (see screenshots)

Helen 🙂

Looks strange. It looks fine to me, 1 column on mobile

How strange! I have tried it on three different mobiles now and it all displays as two columns and is behaving as if it was a desktop site. What browser are you using to view it?

On 6/7/2022 at 5:29 PM, helenwilson said:

How strange! I have tried it on three different mobiles now and it all displays as two columns and is behaving as if it was a desktop site. What browser are you using to view it?

Try adding this to Design > Custom CSS

@media screen and (max-width:900px) {
div.index-section {
    width: 100% !important;
    float: none !important;
}
}