- This topic has 29 replies, 3 voices, and was last updated 2 years, 1 month ago by Stephen.
-
AuthorPosts
-
March 13, 2022 at 6:24 am #2152786Stephen
http://www.stephenlavender.site
Hi, when I set – menu item height – for mobile screen size then the height of the mobile header also changes.
If I set the – menu item height – so the menu is OK then the header is too small and if I set it so the Header is OK then the Menu is too large.
– Can I set the menu item height and mobile header height separately please ?
Thanks
StephenMarch 13, 2022 at 8:00 am #2153061DavidStaffCustomer SupportHi there,
one thing is you have this CSS ( in Customizer > Additional CSS ) – which is affecting the desktop and mobile logos.
.site-logo { flex-shrink: 0; padding: 20px 40px 10px 20px; }
You can move that CSS inside an @media query to limit those styles to desktop only:
@media(min-width: 851px) { .site-logo { flex-shrink: 0; padding: 20px 40px 10px 20px; } }
March 13, 2022 at 8:42 am #2153083StephenHi, yes of course you are right.
I did wonder about the LOGO padding effecting all screen sizes !
However I do still have the problem that when I set menu height at 70px to get a decent Mobile Header height then the actual drop down menu height is too big.
– How can I set the menu height so the drop down menu is good and also so the header is a good height ?
Thanks
StephenMarch 13, 2022 at 9:31 am #2153119DavidStaffCustomer SupportYou can use this CSS to lock in your font size for the menu items:
@media(max-width: 850px) { .main-navigation .main-nav ul li a { line-height: 45px !important; } }
Then your Customizer changes will only affect the header items ( logo, hamburger, search )
March 13, 2022 at 10:03 am #2153134Stephenperfect thank you,
I’ve a few CSS @media queries now so I’ll try making sure I put them in the same ones.
I’ve tried ordering additional CSS with header CSS at start and footer CSS at the bottom and large screen size CSS before small screen size CSS.
– Does it matter what order additional CSS is in ?
Thanks
StephenMarch 13, 2022 at 10:25 am #2153157DavidStaffCustomer SupportFor this kind of CSS customisation, the CSS rules order doesn’t matter ‘too’ much.
But some general rules you can apply regarding order are:start with low specificity global rules eg.
p { color: #FF0000; }
followed by increasingly more specific rules:
.entry-content p { color: #00ff00; }
And finally you device specific CSS in
@media
queries.
Regarding multiple max or min width @media queries then, max-widths should be descending:@media(max-width: 768px)
before@media(max-width: 420px)
And min-widths ascending:
@media(min-width: 420px)
before@media(min-width: 768px)
These latter points are only relevant if you are wanting different styles on the same element for many different sizes
March 13, 2022 at 10:50 am #2153183StephenThats very good thank you.
I’ve swapped to Generatepress on my main site now from WP Astra and the performance rated by google pagespeed insight has gone up at least 10 points for every page and layout shift for mobile screen woocommerce single products has gone from 0.3 to 0.03.
Its a good theme.
Thanks
StephenMarch 14, 2022 at 4:52 am #2153820DavidStaffCustomer SupportThat’s great to hear ! And glad to be of help
March 14, 2022 at 6:51 am #2153963StephenHi, actually just confirm the improvement in woo product layout shift is from having a thicker header rather than GP.
But its still faster anyway !
March 14, 2022 at 7:11 am #2153988DavidStaffCustomer SupportIf you’re having a layout shift issue, raise a new topic and we can take a look.
But to note: there are several things related to Woocommerce plugin that have a CLS issue…March 14, 2022 at 7:48 am #2154038StephenHi, I did open a topic about “woo single product mobile screen size CLS” which Leo replied to and didnt want to get into I think.
As far as I know the issue comes from how woo provides images dimension that make the gallery placeholder wrong so it shifts a bit.
If you’ve got any ideas how to improve it that would be great.
Thanks
StephenMarch 14, 2022 at 8:07 am #2154218DavidStaffCustomer SupportYeah – woo has some image sizing issues, and dynamic widgets in sidebars can take time to load. All of which can result in CLS.
You can try throwing some CSS at the problems:
@media(min-width: 769px){ .single-product.left-sidebar .site-content .content-area { margin-left: auto; } } .woocommerce div.product .woocommerce-product-gallery { min-height: 354px; }
March 14, 2022 at 12:53 pm #2154511StephenHi, I did think that if anyone had a workaround it would be you guys !
I’ve tried it, refreshed CSS and sadly still getting 0.267 shift before and after.
Could the 354px min-height vary for different sites?
Thanks
StephenMarch 14, 2022 at 1:01 pm #2154518DavidStaffCustomer SupportThe min-height i measured off your site, i updated the code above so it will apply to small screens as well. Give that a shot
March 14, 2022 at 1:09 pm #2154527StephenHi, unless I cant read properly then thats the same
is it the media call part which should change for smaller screens
@media(min-width: 769px) -
AuthorPosts
- You must be logged in to reply to this topic.