Jump to content

Can you edit the mobile view without changing the website view?

Go to solution Solved by tuanphan,

Recommended Posts

I found the approach this article used worked really well. It leverages this cool Chrome extension to show you the ids you use in the CSS. I used to create desktop / mobile only sections of this page on my site. 

I agree with you @Superderevo that this should be made easier, but it turns out it is not THAT bad. I created a post that goes into some more depth.

Here is as an overview

Here is a screenshot of using the extension to identify the section ids.

image.thumb.png.ffa797a2f242e2ada9346739e67a4ad4.png

And here is the mobile-only section I created

image.thumb.png.b9f39c1edf651afb89fff16309286e90.png

It is a little bit of work. I started with cloning the desktop section and then replacing images etc that I needed to that were mobile only. As you can see in the desktop version each item is in an image with a purple vertical bar. I have a completely different image / layout in the mobile version.

You have to keep both visible to add elements to the mobile one. Then you can add the CSS to hide properly and you can move / resize etc from the mobile view.

I found this post first, which told me how it could be done, and then found the article I linked to which felt like a clean approach.

I am planning to use this for some of my other pages where I've struggled. It definitely solves the problem as you have full flexibility to make the mobile section look however you want!

Edited by Glenn72
Link to comment
  • 2 weeks later...
On 4/16/2024 at 3:58 PM, Glenn72 said:

I found the approach this article used worked really well. It leverages this cool Chrome extension to show you the ids you use in the CSS. I used to create desktop / mobile only sections of this page on my site. 

I agree with you @Superderevo that this should be made easier, but it turns out it is not THAT bad. I created a post that goes into some more depth.

Here is as an overview

Here is a screenshot of using the extension to identify the section ids.

image.thumb.png.ffa797a2f242e2ada9346739e67a4ad4.png

And here is the mobile-only section I created

image.thumb.png.b9f39c1edf651afb89fff16309286e90.png

It is a little bit of work. I started with cloning the desktop section and then replacing images etc that I needed to that were mobile only. As you can see in the desktop version each item is in an image with a purple vertical bar. I have a completely different image / layout in the mobile version.

You have to keep both visible to add elements to the mobile one. Then you can add the CSS to hide properly and you can move / resize etc from the mobile view.

I found this post first, which told me how it could be done, and then found the article I linked to which felt like a clean approach.

I am planning to use this for some of my other pages where I've struggled. It definitely solves the problem as you have full flexibility to make the mobile section look however you want!

Great solution @Glenn72. Thanks for sharing and for the Medium article. Spent ages on a friend's website and now I've got to do all this to get the mobile version looking good. I'm going to cry.

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.