-
Posts
-
Dear support,
i have a problem and don’t find the solution.
My mobile burger menu is in my live phone other than in browser mobil devices check (responsive design mode).
The logo (menu?) is in mobile device check in the browser deeper as in my live iphone 11 phone.Would you like to take a look at this phenomenon and perhaps help me where I should look and change something so that both views (my mobile phone and responsive browser devices check) are the same again?
At the moment I can’t rely on the browser check tool.
Please look here: https://imgur.com/a/4NXDY47 Menu is deeper as in my live mobile phone view
https://imgur.com/a/8myt4QJ (live mobile phone view)Can you help me please?
So great thanks!!
strumpel
Hey strumpumpel,
Thank you for the inquiry.
is in mobile device check in the browser deeper as in my live iphone 11 phone.
What do you mean by “deeper”? Are you trying to adjust the position of the burger menu? If so, you can try this css code:
span.av-hamburger.av-hamburger--spin.av-js-hamburger { top: -5px; position: relative; }Best regards,
IsmaelDear Ismael,
thanks for you answer!
No! I don’t adjust burger menu!
I have Problem with adjusting Logo!!
What I mean with deeper??
You don’t show my screenshots?
Every browsers have developer tools with responsive check for a lot of mobile devices!
And when I check the responsive of my site in this browser tools, than I see, that my logo not an the right place is!!! It is a little bit deeper in the header!
And that is bad!
When I check my site live in my iPhone 11 or in a other iPhone 12, than is the logo on the right place! It’s not that deep! It’s okay!
My problem: I can’t trust the responsive browser check tool anymore!
And now the question: Why is the logo in the developer tool responsive check a few pixels deeper than in my iPhone or iPad!!!
Have I a problem with my css code?
Do you understand what I mean now?
Please look at the screenshots!
Thank you strumpel
Hi,
When I check your page it looks like you have this custom css:
try changing the top:41%; to top:27%;
and you have this custom css:
try changing the top:16px; to top:21px;Best regards,
MikeHi Mike,
thanks for your help.But i think, you don’t understand what i mean.
When i changing the top:41%; to top:27%; than is the view in the browser development tool good!!
BUT not in my smartphone! The live view in my smartphone is bad. The logo is too deep.
With top:27%; is my live view in my smartphone good, but the view in the browser development is bad.
Belive me!
Show in your iphone or other smartphone and you will see, that this logo on the right place is.
I cannot explain this phenomenon.
And now I can no longer trust the browser developer tool.
Now do you understand what I mean?
Thanks strumpel
Hi,
Please post the screen resolution of your smartphone, perhaps you are not matching the same size or you are not clear your browser cache.
When I check the browser developer tool and my devices look the same.Best regards,
MikeHi ,
375 x 812.
Browser Cache delete every time after changing the css.
Show my screenshots.
Chrome Browser Developer tool: https://imgur.com/a/aZvsnmc
Firefox Developer Edition – Browser Developer tool:: https://imgur.com/a/muR4fTg
My iPhone 11 live view: https://imgur.com/a/eVfk9dS<<When I check the browser developer tool and my devices look the same.>>
Realy?? Unfortunately not for me …Regards
strumpelHi,
When you write:top:27%; is my live view in my smartphone good, but the view in the browser development is bad.
it sounds like you are referring to this custom css:
because it is the only one that is a percentage, but this one should not change your device vew because it has the max-width of 736px, which is smaller than your device.
This custom css should be the one that works on your device:
because it’s max-width is the same as your device, but I not sure if you are changing the top:16px; to top:27px; or 27%
If I’m correct about this, change this css to:@media only screen and (max-width: 373px) { .inner-container { position: relative; top: 16px; } }so it stops working at 373px and then add this css for your device:
@media only screen and (min-width: 374px) and (max-width: 379px) { .inner-container { position: relative; top: your-value; } }and adjust the your-value to what looks good on your device.
This way other devices will still look correct, it get tricky when a single device doesn’t display correctly, but I think this will work for you.
When I check with my iPhone 7 which has a screen width of 320px, the logo looks just like it does in the browser development tool for the same width.Best regards,
MikeHi Mike,
thanks for your help!!!You: <<When I check with my iPhone 7 which has a screen width of 320px, the logo looks just like it does in the browser development tool for the same width.>>
That is crazy!!
Your css proposal i will check out.
Hmm … that is a tricky strange story….
Best regards
strumpel
- You must be logged in to reply to this topic.