Jump to content

How can I divide sections so they don't appear on top of each other on mobile?

Go to solution Solved by Ziggy,

Recommended Posts

Posted

Hi there!

I have a website on which 2 maps are displayed side-by-side with their respective addresses on top of each map (see 1st image). 
When viewed on a mobile, the addresses are on top of each other with both maps on top of one another below (see 2nd image).

How can I divide the both in such as way that they show with their respective addresses on mobile?

Thanks so much for any help!

Jo

on top of eath other.png

side-by-side.png

  • Solution
Posted

Can you share your website URL?

Assuming that you are using the latest version of Squarespace and the Fluid Engine grid editor, all you need to do is edit the page in the mobile view and rearrange the blocks to be in the correct order. If this isn't something that you've done on this page or other pages it is something that's really important to check and adjust. When editing the page, toggle the mobile view in the top right corner and rearrange the layout. The mobile and desktop block layouts are separate in the Fluid Engine, but the content (i.e. what's inside the blocks) remains the same on both views.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted

@Ziggy. I have a similar question regarding what you wrote > 'When editing the page, toggle the mobile view in the top right corner and rearrange the layout. The mobile and desktop block layouts are separate in the Fluid Engine, but the content (i.e. what's inside the blocks) remains the same on both views. '

If I'm following what you're saying, the Fluid Engine can allow me to design, and publish, 2 different website versions (Desktop + Mobile) simultaneously? My goal is to have the images on my website as large as possible, depending on which device the viewer is looking at the website (desktop version) or (mobile).  Before I jump in and do a large overhaul of the websites I wanted to ask you if you had any experience with this?

Patrick.

Posted
1 hour ago, Patrick_2024 said:

If I'm following what you're saying, the Fluid Engine can allow me to design, and publish, 2 different website versions (Desktop + Mobile) simultaneously? My goal is to have the images on my website as large as possible, depending on which device the viewer is looking at the website (desktop version) or (mobile).

Yes, the layouts can be different for the same section on mobile and desktop, but only the arrangement of blocks, not the block contents.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Posted
4 hours ago, JMOsteo said:

I had no idea this could be done.

Glad you know now, honestly it's a really important feature, I don't make an edit without checking and fixing the mobile version, and I generally recommend the same to anyone.

Please like and upvote if my comments were helpful to you. Cheers!

Zygmunt Spray
Squarespace Website Designer
Contact me: 
https://squarefortytwo.com 
Hire me on Upwork!

📈 SEO Space (Referral link)
Ⓜ️ 
Will Myers' Plugins & Tutorials (Referral link)
 🔌 Ghost Squarespace Plugins (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲SQSP Themes (Referral link) 
Spark Plugin (Referral link) 
 🖼️Pinch-to-Zoom Gallery Lightbox Plugin (Referral link) 

 Did I help? Buy me a coffee?

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.