Mobile page width on page load

[nonemauro]

On mobile, the contact form seems to affect the view by zooming in slightly, or it could be the width causing the unproportionally ? ?

View on mobile the example here: https://vitocreative.com/contact

[RyanReese]

I haven’t actually looked at the page in mobile, but this sounds familiar.

When you say it zooms in slightly, is that when you tap the input to start typing text? IIRC IOS has a “feature” that zooms in the input if it’s less than 16px font size. I see it’s set to 15px. Might want to try that. I don’t have time to look in a mobile phone so I thought I’d share this.

[nonemauro]

Thanks for the reply! It zooms in on page load cutting off the right side of the page slightly:

[PaulOB]

Hi,

That looks like some kind of page builder as it is filled with miles of practically useless (and over-engineered) code.

The page is broken badly on desktop as there are no media queries for smaller sized desktops.

It looks like the page is doing some sort of mobile detection and has decided that all phones are 475px wide (of course they are not). There is a viewport meta tag in the mobile page setting the viewport to 475px and all your styles are setting widths of 475px and basing all the inner content on that width. That’s why you get an overflow on an iphone as the width of my iphone is 375px.

As a quick fix you can try setting initial-scale to 1 in the viewport meta tag and that might make the device scale the page smaller automatically.

e.g. Change the existing meta tag to this.

<meta name="viewport" content="width=468" initial-scale="1">

However I believe that the viewport meta tags are being dynamically added as the desktop has the correct meta tag where it is set to device-width. Here is a screenshot from the iphone web inspector.

As you can see there is a script inserting that tag as seen by the $0 at the end.

You will need to find those tags and set initial scale to 1 as shown above. Hopefully it will sort the problem for mobile but it seems you are detecting loads of other devices so they will probably be wrong also.

As I said above the desktop display is broken for me because I never have my window maximised.

[nonemauro]

@PaulOB

Thanks for the reply, I added the above code and that fixed the issue on mobile. The pagebuilder is called Pagecloud and it is similar to WIX or Squarespace. The backend allows to build your website in two modes (Desktop mode and Mobile Mode).

The pre-built code is supposed be responsive, so it should adjust according to the screen size.

But if you manually shrink and stretch the desktop browser window it will appear like it’s broken, but I think the best way to test is by using a Responsive Design Testing tool like browserstack.

[PaulOB]

@nonemauro

But if you manually shrink and stretch the desktop browser window it will appear like it’s broken

Yes that’s what I do all day long. I have about half a dozen windows open on my large iMac and just drag the screens depending what I’m working on. I never surf maximised and would never refresh a resized screen.

Detecting screen size on page load is a flawed concept and not one I’d advocate. I don’t know why these web builders do this because it’s nonsense really and there’s no real need. I believe they are perhaps trying to control every aspect but in the process end up breaking something else.

Glad you fixed the mobile issue anyway