Archived topic
Font size - Woocommerce breadcrumb and Woo Shop pages on Mobile screen size
10 replies · Started by Stephen on May 4, 2022
I have used a HOOK element to display Yoast breadcrumbs on all pages (before main content) so I can get Yoasts PRIMARY CATEGORY to show in the WOO SHOP products page breadcrumbs.
However on my mobile phone (in Chrome Browser) the font size of the breadcrumbs changes between WOO SHOP pages and NORMAL pages.
(in mobile Firefox they look to stay the same)
It looks like the BREADCRUMB in WOO pages is the same font size as the rest of the WOO SHOP page.
Also font size of BREADCRUMB on NORMAL page and size of BREADCRUMB on WOO SHOP pages varies in Chrome mobile phone browser.
- Why does WOO SHOP font size vary in different mobile phone browsers?
- Why does BREADCRUMB font size vary between NORMAL page and WOO SHOP pages on Chrome mobile phone browser?
- What is setting the font sizes in these situations ? (in CSS I have put 15px as font size for breadcrumbs)
SITE IS - http://www.slservice.net
CODE I HAVE USED IS BELOW:
HOOK ELEMENT
div class="hook-space"
wpseo_breadcrumb
/div
CSS STYLING
/*yoast breadcrumbs format */
.hook-space {
font-size: 15px;
padding-bottom: 7px;
padding-top: 1px;
color: grey ;
}
/*yoast breadcrumbs link color */
.hook-space a {
color: grey ;
}
Hi there,
have you tried clearing the browser cache on your mobile device? As i cannot see any difference.
Hi, yes I've just tried it.
Its very noticeable on my phone on android chrome browser that my breadcrumb is bigger in woocommerce pages than on my normal pages.
On android firefox and android edge breadbrumbs look like same size on normal pages and in woocommerce.
Though in android firefox the breadcrumbs font size is smaller and in android edge breadcrumbs font size is bigger.
- Seems like font sizes are varying in mobile phone browsers ?
This is from me inspecting your site on my iPhone:
https://www.screencast.com/t/EtBLJLWZ
there is no different CSS for the mobile device.
Can you ask someone else to check their phone too ? Preferably on a different network.
Hi, Pixel 3aXL on wifi
Chrome - displays smaller breadcrumbs on normal page, larger on woocommerce
Firefox - display breadcrumbs same size on both (both same size as larger size in Chrome)
Edge - same as firefox
Pixel 4a5g on 4G
- same as Pixel 3aXL
I have noticed font sizes in general vary between my android browsers !
In general
Android Chrome has
- smaller font sizes on Normal Pages and larger on Woocommerce pages
Firefox & Edge
- same larger font size on Normal Pages and Woocommerce pages.
I wonder where Android Chrome is getting the smaller font size from ?
See here - this is using a Pixel 5 responsive view, and you can see on the right side that the CSS for the breadcrumbs does not change as i navigate around the site:
https://www.screencast.com/t/btuFs1RSX7fy
It sounds like a caching/cookie or rendering issue on your chrome browser. Which isn't something the theme can fix.
Thanks for that, looks like android chrome is doing some automatic resizing on my phone.
However I would like to make the mobile screen size font in breadcrumbs smaller.
- How can I decrease font size for mobile screen size breadcrumbs?
- Is that a media call?
I've used the following CSS to style breadcrumb in general:
/*yoast breadcrumbs format */
.hook-space {
font-size: 15px;
padding-bottom: 7px;
padding-top: 1px;
color: grey ;
}
/*yoast breadcrumbs link color */
.hook-space a {
color: grey ;
}
Hi there,
If you want to apply some CSS to mobile, just simply add a media query to wrap the CSS like this:
@media (max-width: 768px) {
/*add your css below*/
}For example, reduce font size on mobile:
@media (max-width: 768px) {
.hook-space {
font-size: 13px;
}
}Lovely thanks that should do it 👍
No problem :)
