Jump to content

Cant make Desktop version and mobile version the same whatsoever

Recommended Posts

Hi everyone, Im making a portfolio website to host my video work on and im using https://eycndy.co/ as an inspiration.

I've been able to recreate the grid of gifs look to my satisfaction on the desktop version but it all goes wrong on the mobile version and ends up automatically aligning vertically. 

im wondering if there's a way to just have a scaled down replica version of my desktop layout for my mobile version using custom CSS 

Here are some photos of what i mean 

Screenshot 2023-10-06 at 4.50.26 AM.png

IMG_6178.PNG

IMG_6179.PNG

Link to comment
  • Replies 6
  • Views 1.4k
  • Created
  • Last Reply

Top Posters In This Topic

Popular Days

Top Posters In This Topic

Posted Images

If you're using the latest version of Squarespace with the fluid engine editor (grid layout) you can (and need to) design the layout on mobile as well as on desktop. When you do that you get 8 columns instead of 24, so you should be able to create a layout that you're happy with on mobile.

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
5 hours ago, Ziggy said:

If you're using the latest version of Squarespace with the fluid engine editor (grid layout) you can (and need to) design the layout on mobile as well as on desktop. When you do that you get 8 columns instead of 24, so you should be able to create a layout that you're happy with on mobile.

I still face the same issues regardless as on the mobile version the image blocks are still stacked vertically in one row instead of a grid layout

Link to comment
18 minutes ago, Kariimtarekk said:

I still face the same issues regardless as on the mobile version the image blocks are still stacked vertically in one row instead of a grid layout

Can you share your website URL please?

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 edit the page, toggle the mobile view (top right) and then set the layout you want on mobile, it's similar to changing it in the desktop view.

Please note, when editing the mobile view the content is the same, you can change the layout, but if you delete any content on mobile it will be deleted on desktop too. Just reposition and resize your blocks.

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
4 hours ago, Ziggy said:

You need to edit the page, toggle the mobile view (top right) and then set the layout you want on mobile, it's similar to changing it in the desktop view.

Please note, when editing the mobile view the content is the same, you can change the layout, but if you delete any content on mobile it will be deleted on desktop too. Just reposition and resize your blocks.

Okay will try that, thank you so much 

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.