How to make the desktop vs mobile page be completely different?

Hi, new here thinking about using plasmic at work. question: how to i avoid responsive designs? our mobile page needs to have completely different elements, so it doesnt make sense for us that the design changes with editing the desktop version. the problem seems pretty easy to fix but i wasnt able to find a solution.

Either 1. you embrace the responsive design by fully changing the layout (see the mobile layout, enabled by default) or 2. you create a new plasmic project for your mobile site and you redirect your user to your correct subdomain regarding its device/screensize.

hi alexis, i get what you mean with 2. but im a bit confused about the first point you made. can you maybe try to explain it again? thanks for ur help

It is just that you can choose whatever you want to display in your component and it can depend of the screen size of the user. If you want to hide a button on mobile: no problem.

okay thank you!

Thank you for helping @numerous_snake!

Hi @puzzled_pelican , if you would like your pages to have completely different content on desktop vs mobile, the way to do it is:

• Create your desktop page inside a top-level container
• On mobile, hide that container, so the entire page is hidden
• Create your mobile page in a separate top-level container, ensuring it’s hidden on desktop

1 Like

Let me if that makes sense!

@yang that makes sense, thank you :slightly_smiling_face:

@yang hi yang, i thought i understood what u meant, but i still dont really know how to fix the problem. u said i should create a desktop page inside a container? how does that work?

Oh I just mean create all the content for your desktop page inside of a top level vertical stack

Then create all the content for your mobile page inside of a second top level vertical stack

On mobile, make the first one hidden

On desktop, make the second one hidden

Does that make sense

ah okay yes now i got it :))