▼
Streaming live at 10am (PST)

Unwanted white/scrolling space in mobile + slow

Design help General
#1

Hi everyone,
I found out about Webflow a few weeks ago and I just built my first site :slight_smile:
It has been a lot of fun so far but there’s one problem that I didn’t manage to fix yet.
On mobile, there’s an unwanted white space on the right side of the page and I saw that other designers in the forum were having the same problem and that it’s probably due to an element being wider than the body but I can’t find it…
I first thought that the problem was the nav bar but the white space only appears on the following pages:

  • “Über uns”
  • “Personalsuche im Inland”
  • “Pflegekräfte aus dem Ausland”
    When I navigate to one of these pages the drop-down in the nav bar also changes…

In general, the website is also quite slow on mobile even though it loads fast on desktop.

Screenshot_2|281x500 Screenshot_1|296x500

Here is my site Read-Only: https://preview.webflow.com/preview/interpers-homepage?utm_medium=preview_link&utm_source=designer&utm_content=interpers-homepage&preview=dc3249a4ac9039409b63f712f93c9adf&pageId=5e41bfafa0909918e01382f7&mode=preview´
(the white space only appears when I view the website on my phone or with Inspect on Chrome - not in the Webflow preview…)

#2

@elolitta,

For the issues with speed, I’ve noticed that full background images are used for for all viewports.

When a background image is set, smaller version of this image are not made responsive by Webflow.

To fix the slow loading (of images specifically) I would advise resizing the images Desktop images for Tablet > Mobile. Example, you use a 2000px width image for Desktop, resize this down to 1000px for Tablet, 800px for landscape mobile, and 500px for mobile. Also, ensure that you run any images through TinyPNG to compress the size further.

1 Like
#3

You maybe could also use an image instead of a background image. And use it with the img-fit property to mimick bg-img “cover” or “contain” properties. This way Webflow will produce a responsive version of the image. Do you think this will work?

1 Like
#4

Yeah, you could definitely do this too.

As @vincent suggested, the image component within Webflow will automatically resizes images.

#5

Ah that makes sense! Thank you so much, I actually didn’t know that I had to adjust the images separately. So background images need to be adjusted manually and images will be automatically resized?

#6

I don’t quite get what you meant but here’s the breakdown:

Images

  • are part of the DOM, they are declared in the HTML
  • they’re meant to be part of the content of the page
  • they can have a alt descriptions and title, for accessibility
  • they can be set to fill their parent element using img-fit CSS property (fill, contain, cover)
  • Webflow generates responsive¹ versions of them

Images as background-images

  • aren’t in the HTML file at all, only in the CSS
  • they’re meant to be part of the decoration of the page
  • they can’t have a description nor title
  • they can be set to fill their element using contain and cover value for the background-image CSS property
  • Webflow doesn’t generate any responsive¹ version of them

¹ Responsive images are a Webflow thing https://webflow.com/feature/responsive-images-details