Tagged: editing window, media query, mobile menu
- This topic has 8 replies, 2 voices, and was last updated 6 years, 4 months ago by
Sebastian.
| Author | Posts |
|---|---|
 Martin_1
December 18, 2017 at 4:23 pm
|
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. 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
December 18, 2017 at 5:40 pm
|
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, |
|
Martin_1
December 18, 2017 at 5:59 pm
|
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. 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
December 18, 2017 at 6:09 pm
|
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, |
|
Martin_1
December 18, 2017 at 6:18 pm
|
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
December 18, 2017 at 6:38 pm
|
I solved it differently now by adjusting the media querie for the Desktop & Tablet from
to
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
December 18, 2017 at 6:50 pm
|
Oh well done. And I see you’ve just solved that last issue too now unless I’m mistaken? 🙂 |
|
Martin_1
December 19, 2017 at 5:37 pm
|
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
December 20, 2017 at 10:08 am
|
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:
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, |
