Overlapping White Space Mobile

Hi all. I know this has been talked about a lot. I’ve tried searching all my sections etc and just can’t get around what is causing it.

In iPad view I have a slight overlap into white space and in Mobile view the white space is huge! I’ve checked all the widths etc but can’t find anything! If I switch Scrolling to none, which fixes the overlapping, then can’t use scroll on a touch screen device.

Any help much appreciated! Cheers

https://preview.webflow.com/preview/nicocam?utm_medium=preview_link&utm_source=designer&utm_content=nicocam&preview=e680a359bce659c47c3ee5e3c0198b11&mode=preview


Here is my site Read-Only: LINK
(how to share your site Read-Only link)

Are you referring to the horizontal scroll issue? One area I can see is affecting this is the ‘tabs’ elements. They have a fixed width set on them. If you remove that then the tabs menu will not overextend beyond your container. There may be other elements with the same issue as well, but the tabs for sure.

Thanks for the speedy help! You are right, just changed some of the tabs that still had fixed width… but issues still persists (horizontal scroll).

Yep, keep looking through the rest of your elements and remove fixed widths from everything you can. And try using percentages instead to control your widths where needed.

Ok I’ll go through again. So Is it not possible to have equal sized tabs then?

You could make them equal. But set it as a percentage (like they’re all 20% of their parent element, for example). Then, as the screen gets smaller their widths will adjust accordingly and not cause the horizontal scroll. You can force them to wrap to the next line as well if you think they are getting too small on smaller screens if you use flexbox.

Thanks! I didn’t realise the % was for this reason. That totally makes sense now. Very helpful thank you!
I’ve gone through all the elements and I don’t think I have any Widths (apart from %) that are set now but still persists rahghgasdg

Hello @frozenleaf
Here are a few things I noticed as to why you are getting overflow on your page:

  1. Tablet view - Inside Footer Symbol, element called "Footer links has a negative riight margin of -20, remove it and tablet will not be overflowing any more.

  2. Mobile landscape- Element named “container 10” inside of it has " Heading Jumbo Hero" which has side padding on both sidee of 100px, make it 0 on both sides

  3. Mobile landscape - Element named "tabs menu"in Kit Lists has multiple tab links iinside of it which aree too wide for most phones in landscape mode, first of all I recommend you making “tabs menu” wrap it’s children (see the picture) and after that selecting element “tabs” and giving it a different wiidth since 60% will not work well, I recommend something like 30%.

If you dislike this solution you can always giive element “tabs menu” setting overflow auto and adjust for it accordingly. Also iin this stage I’d advise you to give element “footer wrap” height auto so you don’t have overlapping content there, also happens at a few other places but it should be same logic as thiis one.

  1. For Mobile Portrait- Slider element needs to have overflow set to none (see the picture)

  2. For Mobile Portraite- Recaptcha has limited styling so you can’t adjust it as you like in terms of width etc. I’d advise either removing it if you don’t need it or wrapping it in a div and styling that div with size that fits and after properly sizing it setting it’s overflow to none.

Let me know how it goes and if you need any other assistance, cheers.

Hi,

I’m off to bed now so will try and clean up tomorrow, but just quickly went through your points and they all worked! Thank you so much!! Awesome!

I hadn’t got round to doing mobile Landscape so it’s still a mess. After your changes, in the mobile portrait mode there is still a bit of horizontal scrolling but more similar to how the tablet mode was but yes the slider overflow! I spent 2 hours tearing my hair out! With all your great points I should hopefully be able to work the rest out tomorrow!

Thank you so much! Really kind :slight_smile: :slight_smile:

Nico

Nico Hambleton | Lighting Cameraman & DOP | Aerial Drone Pilot
07803876583
hello@nicocam.com

This message contains confidential information and is intended only for the intended recipients. If you are not an intended recipient you should not disseminate, distribute or copy this e-mail. Please notify us immediately by e-mail if you have received this e-mail by mistake and delete this e-mail from your system. E-mail transmission cannot be guaranteed to be secure or error-free as information could be intercepted, corrupted, lost, destroyed, arrive late or incomplete, or contain viruses. Therefore we do not accept liability for any errors or omissions in the contents of this message, which arise as a result of e-mail transmission. If verification is required please request a hard-copy version.

@frozenleaf I just checked you are still getting a bit of horizontal scroll due to recaptcha element in form. Recaptcha has limited styling so you can’t adjust it as you like in terms of width etc. I’d advise either removing it if you don’t need it or wrapping it in a div and styling that div with size that fits and after properly sizing it setting it’s overflow to none.