Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hello
I would like to change the font size overall in the Unwind theme. I know how to do it for the top menu, but I would like the font to be bigger for products, checkout page and other pages. Is there some css that I can add to SiteOrigin CSS that can increase font size globally across the board?
Thanks
Hi Stella
I think there might be
pxfont sizes used in some places so I’m not sure if it’s possible to globally change the font sizes to scale.You can try to increase the base font size from 15px to 16px as follows:
html { font-size: 100%; }http://pxtoem.com/
Hi Andrew
I tried the html code but it did not affect the body font size. I am passing a Woocommerce short code in a Siteorigin headline widget to display featured products. But the text is smaller than the rest of the page.
Thanks for passing along the link to font size conversion. Great stuff. I learn something new with each response!
Thanks for your feedback. Have you perhaps tried the visual editor in SiteOrigin CSS? Once SiteOrigin CSS is activated, go to AppearanceCustom CSS, click the eye icon to open the visual editor.
Page: Visual Editor
I’ve been testing the visual editor to some degree, and I’m starting to understand it a little bit. I find it a little confusing to select certain areas to of a page, and to navigate to other pages from the default main page. I just used the expand icon to piece together a solution.
Here’s the CSS code I used to fix my problem:
.woocommerce-loop-product__title {
font-size: 16px !important;
}
My concern is how manually changing font size will affect the mobile and tablet look of my website. Does the custom CSS only affect desktop users? Does the theme know to switch to mobile settings even if I add code to the SiteOrigin visual editor?
Still trying to figure out the code to fix the cart or checkout page font size. For some reason its tiny.
Also is it normal to add custom CSS to manually adjust font size on every page/area? The checkout and cart pages are using smaller sized font. So I am trying to find each element to fix it.
Sorry for all the trouble, thanks for the assistance!
You can navigate to other pages in SiteOrigin CSS by selecting the magnifying glass icon, that’ll deactivate the selector so you can use your website navigation to move around.
The CSS rule pasted in your reply will apply to desktop and mobile. 16px is no problem for mobile. You’d have to wrap the rule in a media query to have it restricted to a resolution or device.
If you send a link to the checkout page, we can take a look.
Thanks Andrew. My site is not live yet, and have been dealing with a bad backup restore.
I’m fine for now as the Google font I changed to is looks better.
Thanks for the update :) I’m glad to hear you’re making progress.