Jump to content

Desktop and mobile version has totally different alignment

Go to solution Solved by Ziggy,

Recommended Posts

Hi Squarespace Community,

I have worked on my post, it worked well on desktop format but when i switched over to mobile format, everything is in wrong order.

Could anyone advise on this? I spent a few days to work on it and only to realised its end results are different. 

Thank you and i really appreciate your help in advance.

password to page: test

Link to comment
  • Solution
7 minutes ago, bernardwang said:

I have worked on my post, it worked well on desktop format but when i switched over to mobile format, everything is in wrong order.

This is a common question, and the answer is that Squarespace's new layout editor requires that you edit the layout for both desktop and mobile. This is a new thing for Squarespace, previously there was no option for editing the mobile layout. So what you need to do for every page, is go in to edit a page, then toggle the mobile view in the top right, you will then see all of your blocks roughly in the right order but also possibly in the order that you added each block, and you need to move everything around to be in the correct order.

If you click on a block, the popup will show an up and down arrow, you can use these to reorder, but you can also click and drag blocks around just like the desktop layout editor. You can also change the shape and size of the blocks to suit your design.

Bear in mind that the desktop and mobile content will be the same. If you edit the text on mobile it will effect the desktop, if you delete a block it will disappear on both mobile and desktop, it is only the layout that can be different.

As a further note; when you make changes to the page in the future, make sure to always check the mobile view as this may need editing any time you edit the content.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

You need to add a folder to your main navigation, and then put the pages you want inside the folder. 

To add drop-down menus, use folders.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Hi Ziggy

Thank you. 

Prior to this, i actually have 3 blog posts created inside 'Blog' Collection. 

I am unable to drag a new page outside of 'Blog' Collection into 'Blog' Collection. 

How can i transfer a new page into a 'Blog' Collection?

Thank you

 

Link to comment
4 hours ago, bernardwang said:

Prior to this, i actually have 3 blog posts created inside 'Blog' Collection. 

I am unable to drag a new page outside of 'Blog' Collection into 'Blog' Collection. 

How can i transfer a new page into a 'Blog' Collection?

I'm not sure I fully understand what you're trying to do, but if you have multiple blog pages, you can select a blog post (or multiple) and at the bottom left you will see an option to move them to another blog page. 

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

Blog pages are not folders, pages can't be moved and dropped into them. If you want that content on the blog page then you need to create a new blog post and replicate the content in the blog post.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
44 minutes ago, bernardwang said:

Hi Ziggy,

Thank you

Does it mean i have to retype my entire article into Blog pages? I cant seem to find a way to duplicate file and add into Blog pages

Thank you. 

You will need to copy and paste the content of that page into a new blog post.

Sayre

Design: (Recently rolled into the Italian Journey under Services)

Author Coordinates: https://bio.site/sayreambrosio

Italian Journey: https://bio.site/ambrosiosjrnyhm

Link to comment
11 hours ago, bernardwang said:

Hi Ziggy,

Thank you

Does it mean i have to retype my entire article into Blog pages? I cant seem to find a way to duplicate file and add into Blog pages

Thank you. 

The text can be copy/pasted in to the new blog you need to create, images will be in the asset library, so don't need re-uploading.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
On 6/4/2023 at 5:58 AM, bernardwang said:

I guess it is the platform's limitations.

Yes, the formatting method is also different for blog pages, it will take some time depending on the content, but it's the only way.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment
  • 10 months later...

So I have spent days upon days making my website to now find that it is totaly unusable because when I view it in Mobile view it is a jumbled up mess. Total mess. 
So I tried changing it while in mobile view to see if the 2 may work separately once editing both views but no!! When I go back to desktop it becmes a mess there also!!
how can they seriously charge money for this?

My website it totally unusable and I've spent days when I could have been doing payed work to do this!! 

Surely there must be a button that corrects it?????

I cannot believe that such a large company ca be producing something which basically isn't usr worthy.

 

Link to comment
On 6/1/2023 at 8:08 AM, Ziggy said:

This is a common question, and the answer is that Squarespace's new layout editor requires that you edit the layout for both desktop and mobile. This is a new thing for Squarespace, previously there was no option for editing the mobile layout. So what you need to do for every page, is go in to edit a page, then toggle the mobile view in the top right, you will then see all of your blocks roughly in the right order but also possibly in the order that you added each block, and you need to move everything around to be in the correct order.

If you click on a block, the popup will show an up and down arrow, you can use these to reorder, but you can also click and drag blocks around just like the desktop layout editor. You can also change the shape and size of the blocks to suit your design.

Bear in mind that the desktop and mobile content will be the same. If you edit the text on mobile it will effect the desktop, if you delete a block it will disappear on both mobile and desktop, it is only the layout that can be different.

As a further note; when you make changes to the page in the future, make sure to always check the mobile view as this may need editing any time you edit the content.

So what on earth is th point of this???????? I have just done this exactly and there is literally No point because they affect each other so badly that there is no way on earth I can make my website live!! 

 

Link to comment
  • 4 weeks later...

I am having the opposite problem. I made my webpage and then went in to edit the mobile version, and every time I change this particular shape, it also changes the desktop version. I've been trying to figure out how to center an object for both for days. Help, please.

Link to comment
8 hours ago, KristyO said:

Help, please

Can you share your website URL and where you are having this issue?

Horizontal alignment is a global change (affects desktop and mobile) but vertical is local to mobile/desktop. I don't know why this is! 

Should be possible to do this with CSS for you though.

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!

🔌 Ghost Squarespace Plugins (Referral link)
📈 SEO Space (Referral link)
 SquareWebsites Plugins (Referral link)
 🔲 SQSP Themes (Referral link) 
Spark Plugin (Referral link) 

 Did I help? Buy me a coffee?

Link to comment

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.