Mobile Site Issues

[rileyberg]

Good morning —

I have two issues:

1) For my maintenance page, I’ve created a menu that does not have any links. This is called “Maintenance Menu”. It is working when viewed from the computer, but on mobile it is still showing the main menu from the rest of the site. How can I fix this?

2) When I view my site from my mobile phone, it is squeezed when I hold the phone vertically (first screenshot). It looks normal when I turn my phone horizontally (second screenshot). What can I do to fix this?

Thank you!

Riley

Attachments:

You must be logged in to view attached files.

[Mohammad – SUPPORT]

Hi,
I have checked your website but i am not able to replicate the issue.
Thanks
Mohammad

[rileyberg]

Good morning —

I migrated my finished site to a new domain, but before it is launched, I’m still having this issue. I’ve tried it on 4 different mobile devices, and each time it either automatically appears squished, or in order to see the expandable menu icon, I have to zoom out and it’s crunched.

Any help with this would be greatly appreciated!!! 🙂

Thanks!

Riley

[rileyberg]

Sorry, new domain is jacksonyounglawyers.com/home

[David Martin – Support]

Please remove this from your Custom CSS:

[rileyberg]

Thanks. That solves the problem of the entire page being squished. However, the logo is now squished on the non-mobile site. That coding was meant to allow it to appear in its full 600px. I’ve uploaded a new, smaller retina logo, so we’re all set on the mobile side of things.

Can you help me set the css so the header logo is allowed to be 600 px, but doesn’t impact the mobile site/retina logo?

Thanks!

[David Martin – Support]

The logo can only be the max width of it’s parent container which for this header layout is four columns totaling 323px.

You can test overriding this using this:

.col-sm-4.logo-left {
    width: 600px;
}

[rileyberg]

That did not work for me. What else can I try?

[David Martin – Support]

That will work, try this:

.col-sm-4.logo-left {
    width: 600px!important;
}

[rileyberg]

Awesome! Thank you! That worked.

One last issue. Is there a way to set the width of the retina logo in css? If you look at jacksonyounglawyers.com/home on a phone, the JYL logo looks fine when I told my phone vertically, but when I turn it horizontally, it stretches out (doesn’t keep the same scale). Thanks!

[David Martin – Support]

Sure, you can change it what your needs are using this:

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
#logo img.retina, #logo h1.retina {
    width: 50%!important;
}
}