Streaming live at 10am (PST)

Mobile Website Solution Question

So I found a general workaround solution for making a “visible” mobile site within a desktop site.

I basically have been duplicating grids and sections by making one mobile-friendly and the other desktop-friendly. I would then hide the desktop-friendly site when it is in the mobile breakpoint. Vice versa, I would hide the mobile-friendly site while in anything but the mobile breakpoint. Is this more or less what I should do? Or is there an easier way?

**For the sections where I can change styling, I leave those parts alone. **

Hi @Bryce_Balingit, the method you are using will work as Webflow does allow you to hide and show the elements for different viewports.

This is probably more work as you need to duplicate everything assuming you are using the same content, plus you probably need to use different classes or combo classes in the different styles, so it can get confusing rather quick.

There are cases for creating multiple elements and hiding and showing those depending on viewport, but in general I would recommend to style the desktop as needed and then on lower viewports just just update the desktop styles if needed.

If the site styles at Desktop are created with Responsiveness in mind, there should not be too many css overrides needed at lower viewports to make the site look good and responsive on mobile.

Here is a good tutorial on creating a responsive site design: Intro to responsive design | Webflow University

The Flexbox examples page is also a good place to get responsive layouts:

I hope this helps

1 Like

Thank you, I’ll try to keep that in mind. I am starting to see patterns after using it for a while. The theme I am learning so far is using VW for font sizes, and flex box like you said. For photos I am not too sure about but I’ll look into the tutorial for more help. Thanks again!