Mobile Responsiveness Issue

Design help General
1

Hello Webflow Community

I have just publish my first client website on webflow and the only concern I have is the mobile version width is too wide on the services page and I can see why?

On the homepage it is perfectly fine but I cannot see what is making the services pages create all the space to the right when swiping left.

I have attached the photos because I am not sure if it makes sense lol

Can anyone help with this?

Below is the read only link

Kind regards

Mike L

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

2

Sounds like an overflow issue. I noticed your map in the footer is set to a width greater than the viewport on mobile. Try 100% instead.

3

Thank you for your reply

The thing is the footer is a symbol and on the home page it doesn’t have this problem.

It seems to be one of the sections but can see it

4

Hey Mike,

I was able to fix the issue. Try following these steps:

  1. Take the SanteMap embed block out of the MapWrapper and delete the wrapper
  2. Change the display mode of SanteMap back to block
  3. Delete the width, min-width, and max-width from the SanteMap styling
  4. Open the SanteMap embed block settings and change the width to 100%
  5. Go to the landscape mobile view and delete the width and align styles from SanteMap
  6. Go to the portrait mobile view and delete the width from SanteMap

That should fix all the width issues you’re having with the map.

If you want to map to extend to the edges of the screen, you can try to adding a negative 21 pixel margin to the map left and right, then change its parent flex align setting to stretch on all the media query sizes.

Also delete the 100vw width from the MyContainFooter on portrait mobile. This is causing a width issues as well because 100vw plus a 21 pixel margin is wider than the viewport.

1 Like