-
Rookie mistake?
After building my site on my desktop (16:9 4k monitors) ,I opened one of my laptops (same ratio & res) to double check things and noticed that my site was too big. I reduced the main container from 1345 to 1200px and it looked good except the primary nav was centered rather than justified left, even with the other containers. I then checked my video/photo editing laptop (16:10 3.2k screen) and it was too big even at 1200px.
THEN, I noticed that I have Window’s Font Size set at 135% on my desktop monitors (where I built the site). It didn’t cross my mind that the customizer desktop view would be affected as such, When I changed the Window’s font size to 100%… yikes!
Needless to say, I need to sort out how to make my site scale correctly across all devices. Any idea where I should begin?
-
Hi Trey,
Sorry, I don’t quite get your point.
The site should be responsive automatically unless you have custom CSS that is affecting it.
So what is the main issue?
-
That is likely the case but have no idea where.
Regardless, I added a screenshot in the private area of how the menus appear on my actual mobile, desktop, and laptop screens. Thoughts?
– Trey
-
I don’t see big issues here, the menu functions well, can you tell me how you want it to be?
-
If you look at the screenshots, the menu on the laptop is squashed compared to the desktop (see the difference in spacing and the location of the pointers). On the mobile menu, I would prefer the pointers to the side be closer to the menu items… but not a deal breaker if adjusting them throws the other views off.
– Trey
-
that’s a much better description of the issue 🙂
So do you want the dropdown icon to be next to the menu item text on all devices?
-
That is my goal, LOL!
-
Try this:
.main-navigation.toggled .main-nav > ul a { display: flex; }
-
That seems to have fixed it as well as the drop-down speed (from my other topic), but two things…
The arrows shift left one way on desktop and the other way on mobile when collapsing the menu
Lastly, the hamburger is justified near the left on the desktop but is about 30% to the right in laptop view. I notice it shifts when I open & close the customizing menu side bar.
*I am in process of putting the header at the top of mobile view since it needs to be showcased, but I don’t think it will affect anything.
– Trey
-
The arrows shift left one way on desktop and the other way on mobile when collapsing the menu
Yes, it’s because of this CSS, there’s a 10px padding-left by default, you’ve set it to 0 using below CSS.
@media (min-width: 769px) { .main-navigation.toggled .menu-item-has-children .dropdown-menu-toggle { margin-right: 900px; padding-left: 0px; } }
Removing the
margin-right: 900px;
and changing the padding from0px
to10px
should fix the issue.Lastly, the hamburger is justified near the left on the desktop but is about 30% to the right in laptop view. I notice it shifts when I open & close the customizing menu side bar.
You are using static spacing/sizing settings to position the navigation, which is not a good idea, as a website is dynamic, the layout should be responsive on all screen sizes. If you use static spacing, it will cause layout issues in terms of responsiveness.
I recommend examining all your custom CSS and block settings, if there’s any static
width
orheight
value, you need to double check that value, or let me know, I can help adapt them to a more responsive CSS.For example, this CSS is obviously not a good practice with a large value of static
margin-left
, set it toauto
instead should center the navigation on all screens.@media (min-width: 769px) { .main-navigation { width: 57%; margin-left: 340px; margin-top: 20px; margin-bottom: 0px; } }
-
We’re getting closer!
The arrow shift is good on desktop but still shifts on mobile.
I set the margin crazy like that because I obviously don’t know what I am doing. The goal was to get the hamburger to align left, even with the header & other items. How can I set it so that it justifies left on all devices?
Also, I am running into a spacing issue with the header on tablet… which is probably due to the same poor choice in me setting static margins etc.
– Trey
-
Here’s one I can’t sort out. Changing the margin-left: to auto, shifts the header to the left.
@media (max-width: 768px) {
.gb-container-eef77f0e {
width: 590px;
height: auto;
margin-left: 210px;
display: flex !important;
flex-wrap: wrap;
}} -
The goal was to get the hamburger to align left
Then set the
margin-left
to0
. -
To eliminate some confusion, this is in desktop… There isn’t a ‘@media (min-width: 769px) {‘ in this set.
The below moves the hamburger to the extreme left.
.main-navigation {
width: auto;
margin-left: 0;
margin-top: 20px;
margin-bottom: 0px;}
-
When you say align left does not mean actually align to the left?
I’m confused….just slightly left?
-
Ahh, I can see where there is some confusion.
I want the hamburger to always align with the left edge of all content… which is set at 1200px wide. Visually, I want the hamburger to be lined up with the blue lines of the header and the blog content below it… not against the edge of the device screen.
- You must be logged in to reply to this topic.