Streaming live at 10am (PST)

Hiding div blocks for better responsive design?

I am trying to get the design of this box, image, heading and text link to look good on all screen sizes.

Is it okay to make two seperate divs and hide one depending on screen resolution?

Or is there a better way to do this?


Here is my site Read-Only: https://preview.webflow.com/preview/c-merak?utm_medium=preview_link&utm_source=designer&utm_content=c-merak&preview=695977c572615b1dbfefdcb2d5233748&mode=preview

Hey Devin!
That’s a valid use case, I did that a couple of times.
The main consideration should be performance. If the construct you are hiding is really massive, lots of images and other large elements - hiding it display:none will still make the browsers load those elements. So it could have negative performance effects without any benefit.

If you can, try to avoid it but for small things it’s acceptable :slight_smile:

1 Like

I would say that nine times out of ten you should be able to use the same elements within your mobile presentation, however without knowing what you’re trying to achieve on your site I can’t say whether using some “mobile-only” elements makes sense.

Can you give us a bit more detail on how you’d like this to look on mobile?

2 Likes

I’m still debating how to make the design look best for mobile portrait. However, due to how I set things up in the higher resolutions, I have found it difficult to balance and organize everything.

At first, I tried keeping the same design as seen in the higher resolutions, but I do not like having to reduce the text size to keep everything on one line.

I am thinking that I want to do something like 2 or 3 rows of content rather than a single line.

But, I struggle balancing this between the 479px to the 240px resolutions.

For in-depth help, please provide the read-only link!
Generally, if you can’t make the layout shift the way you want and know your css, you’re not using enough divs :joy:

1 Like

https://preview.webflow.com/preview/c-merak?utm_medium=preview_link&utm_source=designer&utm_content=c-merak&preview=695977c572615b1dbfefdcb2d5233748&mode=preview