Streaming live at 10am (PST)

Desktop to Mobile View


#1

Hi guys,

I am very new to web design and web-flow in general. I’d like to understand how to differentiate mobile and desktop view. I realized you could add a class and that worked for when I re-designed the mobile view without it affecting desktop view.

So now the dilemma is if I want to change mobile landscape so it doesn’t look weird and all over the place, is there a way to affect this? Can’t seem to find the option anywhere where it won’t affect regular upright mobile view.

When I go to element settings, it gives the option to add classes but I am not sure I understand correctly if I am supposed to duplicate the lightbox or start over. I am attempting something like a a bunch of images where you can click on and open a video.

So the question I have is there something I’m missing and can’t seem to find on the forums. I did a div box and then a lightbox link with images inside them (as I learned how to on here).

www.yorkvillain.tv


Here is my site Read-Only: https://preview.webflow.com/preview/philips-first-project-35115c?utm_source=philips-first-project-35115c&preview=a78fc8d977bc1620c7505ad726672d8a
(how to share your site Read-Only link)


#2

This article can help you understand this:


#3

Thank you Aaron! This helps me a lot, still unsure how to make it affect landscape mode. :frowning:


#4

I see the whole inherited classes, but cannot make it so that the images will be different (lightbox). In other words if I update one thing it affects desktop. Please help!


#6

Hi @philipujlaki

but cannot make it so that the images will be different (lightbox). In other words if I update one thing it affects desktop.

You can definitely alter styles like color, font, size, etc from break point to break point. However, you are not able to alter content from break point to breakpoint. That is, if you change a lightbox image on the mobile portrait, it will also change on the desktop (one exception here is background images as these are set with CSS).

If you need to differentiate here, you can take these steps:

  1. Duplicate your lightbox
  2. Change the content each as needed
  3. For the one on desktop, change it to display: none on mobile breakpoints
  4. Likewise, for the one on mobile, change it to display: none the desktop breakpoint

I hope this helps!