I am using the Big Cartel Nova theme for my website. I would like to change the font size of the header links and body text (product description) for mobile screen.
Through desktop computer, the font size is perfect but when I look through a mobile screen, the font automatically resizes to a much larger font. Is there a specific css code I should be looking for or need to plug in?
For reference, please look through a mobile screen:
peppercosmetics.com
In your browser, if your right click on the page, and select inspect/inspect element or similar, you are able to view the HTML and CSS for the page that you are on.
The issue you are having is the below code specifically the font-size style, on line 1938 in theme.css
@media screen and (max-width: 560px), screen and (max-device-width: 560px) and (orientation: landscape)
body {
border: none;
padding-bottom: 70px;
font-size: 16px !important;
}
This is getting applied to any devices up to 560px width, anything above that the normal font-size is applied.