Making a Section More Responsive for Mobile Screen Sizes

Design help General
1

I’m looking to tweak the hero section in our mobile view so that it looks more consistent across different mobile screen sizes. Currently, the skinnier the screen size, the further away the images get from our navbar, creating some empty space that isn’t ideal.

35 AM
35 AM642×896 174 KB

On wider mobile screens, this space is reduced because our images are allowed to get wider:

00 AM
00 AM800×902 388 KB

So what I’m looking for is a way to determine the height of the section based on the height of the div that the images are in, so that the gap between the navbar and the div is more consistent. I definitely want to avoid the images getting hidden under the navbar.

Thanks in advance for the help!

Here is my site Read-Only: Webflow - 2017 Annual Report

2

Sure,

  1. Image 35, in settings remove HDPI.
  2. On: Hero Image Div, remove % and expand in flex settings.
  3. Take the pixel height off the: LMH Hero Section. Add 80vh or so.

Now you can drag the Image 35 edges on each screen size to what you want.

3

I’ve always been a little confused by the HDPI setting. I’ve been sizing all my images twice their actual dimensions for retina display purposes, and I thought that clicking that setting told Webflow that I’d done that. Am I misunderstanding that?

I’m also wary of using VH for the height because I can’t really preview it without publishing the site and making it live. 85vh looks enormous in the canvas, and I suspect it will cause taller displays like the iPhone X to have a giant gap above the images instead of it happening on smaller displays.

I’m really limited by how wide those images are, so could I set the height of the section to auto and have the section’s top padding determine that gap and make it a variable value so it scales as screen size gets wider?

4

Oh sure I know after you set the 80vh, then you will drag the image’s edge to set the size.

Do you want me to do a quick video of the process?

And yes, you don’t need to set the HDPI initially, it will set itself after selecting the size. The variants are automatically loaded in WF on the back-end.

5

This topic was automatically closed 125 days after the last reply. New replies are no longer allowed.