Skip to main content
S
Spindrift7318389
Known Participant
March 3, 2017
Answered

Menu intermittently rendering mobile menu incorrectly.

  • March 3, 2017
  • 1 reply
  • 1152 views

Hi guys,

I have a responsive menu on my site. I recently made the mobile version of the menu with position:fixed; so it stays along the top of the site when the user scrolls.

However, for some strange reason, when viewing the site on a mobile (I think just on iPhone), on the homepage, the text and spacing on the expanded menu appears bigger than it should. This happens intermittently though and not every time which is strange - maybe it's a Javascript conflict?

Please see attached screenshots to see what I mean.

This is how it should appear...

...and this is how it sometimes appears...

You can view the site (Link removed by Mod)

Thank you very much guys, hoping you can help me get to the bottom of this!

SM

This topic has been closed for replies.
Correct answer Jon Fritz

Hi Nancy,

Thank you for the helpful suggestion. However, after clearing the Safari cache, the menu issue remains...

SM


You may also want to add in the following css to the top of your stylesheet to normalize the text on iphones...

* {

     -webkit-text-size-adjust:none;

}

That will stop the iphone from using its own algorithm to make text more readable and allow you to set your sizes through css with more complete control.

1 reply

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
March 3, 2017

Assuming that the link that has vanished read Professional Live Music Agency - Tailored Entertainment  then this could be the problem.

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>

This will prevent resizing.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
S
Spindrift7318389Author
Known Participant
March 3, 2017

Hi BenPleysier,

Thank you very much for the reply - admin removed the link for some reason...

I updated that line so it now reads:

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

...but the same issue appears.

Can you suggest anything else?

Thank you again, really appreciate your help.

SM

S
Spindrift7318389Author
Known Participant
March 8, 2017

You may also want to add in the following css to the top of your stylesheet to normalize the text on iphones...

* {

     -webkit-text-size-adjust:none;

}

That will stop the iphone from using its own algorithm to make text more readable and allow you to set your sizes through css with more complete control.


Thank you so much Jon, you're a star - you've cracked it

Also, thank you for pointing out the issue with the meta tag, much appreciated.

Thank you Jon and thank you everybody else for all your informative and helpful responses.

Best wishes,

SM

Terms & ConditionsAccessibility statement
Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices