Mobile alignment problem on phone screens but not in editing window

This topic contains 8 replies, has 2 voices, and was last updated by  Sebastian 2 years, 9 months ago.

Author Posts

Martin_1

Hi,

I have moved the main menu on a responsive site from the left to the right side of the page. However when I look at it on my tablet on vertical mode the mobile menu doesn’t fit and I am not entirely sure how to fix this.

screenshot

Weird thing is. When I click on the tab “Tablet & Phone” it all looks fine and the mobile menu is a lot less wide.

I could use some advice on this one.

Here is the site itself.


Sebastian

Hey Martin,

Thanks for sharing the image and link. I can see that there is a small range of screen sizes in which the menu gets cropped on the right hand side. And this includes your vertically orientated tablet. When designing responsively in Microthemer, it is recommended to manually drag the site preview down using the top ruler. If you do this, you should see the issue occur in Microthemer too.

The cause of the problem is the left padding you have applied (190px for All devices, and 90px for desktop and tablet). This is too much for smaller screens (vertical tablets) and so pushes the menu off the page. The menu is currently centered because it has margin-left and margin-right values of auto (that is a technique for centering elements that have the display property set to block BTW). So if you don’t want the menu to be centered, you can give it a margin-right value of 0 . If margin-right is zero, the margin-left value of auto will align it to the right.

I hope that helps. Please let me know if you need further assistance.

Thanks,
Sebastian


Martin_1

I must be a bit stupid but I don’t get it.

When I resize the screen preview by dragging the ruler from around 1200 pixels to 970 things start to go wrong.
This is in between the tabs “Large Desktop”, “Desktop & Tablet” and “Tablet & Phone”. So should I create another media querie that falls between these wto sizes?

Because if I don’t and I just add marging-right 0 it doesn’t seem to do the trick.

The mobile menu should be centered. The “normal” menu should be aligned right.

I am really stuck here LOL.


Sebastian

Sorry Martin, my fault, I wasn’t explicit. You also need to remove both of your padding-left styles (190 / 90 pixels). But that should do it. You don’t need to create an extra media query.

Creating extra media queries can be the solution sometimes. But whenever possible it’s best to solve the problem by applying styles in the right way (hint avoiding fixed pixel lengths and choosing percentages instead so that elements can shrink with the size of the screen). To learn more about this, check out our responsive tutorial: https://themeover.com/html-css-responsive-design-wordpress-microthemer/

Cheers,
Sebastian


Martin_1

Hmm that’s still not the right solution because now in a lot of other screensizes the normal menu and the mobile won’t align properly.

Probably due to the fact that I also had to give the marging-right value a lot more than 0 so it aligns right below the Skype icon at the top. It shouldn’t go any further.


Martin_1

I solved it differently now by adjusting the media querie for the Desktop & Tablet from

@media (min-width: 768px) and (max-width: 979px)

to

@media (min-width: 768px) and (max-width: 959px)

However, I now am left with one last problem and that is between the sizes 960px and around 1130px where the right size normal menu starts to fall and falls outside of the screen.


Sebastian

Oh well done. And I see you’ve just solved that last issue too now unless I’m mistaken? 🙂


Martin_1

Hello Sebastian,

I am still stuck on the issue between the sizes 960px and around 1130px where the right size normal menu starts to fall and finally falls outside of the screen.

Any suggestions?


Sebastian

Hi Martin,

It’s that left padding I’m afraid. The 190 pixel padding is too much for smaller screen sizes. I know that it centers the menu in full screen view. But it isn’t a long term solution, so to speak, given you want the menu to look right on a range of screen sizes. You have two options here:

You could create a new media query:

@media (min-width: 960px) and (max-width: 1130px)

And reduce the left-padding for that range on your Nav wrap container selector.

Or, you could set the left padding using the vw, unit e.g. 10vw (instead of 190). The VW unit means viewport width. So the number you enter will be relatively smaller on small screen widths. 10vw is just a suggestion. If you play with some different numbers, you might be able to get the menu looking right at all screen sizes, without needing to create an additional media query.

I hope that helps!

Cheers,
Sebastian

You must login or register to reply to this topic.