Problem setting font size and also setting defaults for mobile viewing

Support
#1

Hi, I wrote about this before and I am sorry I missed your response. My font sizes are all over the place, I cant figure out to how to change the settings so that they arent too big somewhere and too small somewhere else. For instance, the font size in the footer is barely readable, but now i think i have the general content size in the posts the right size. Some of the headers seem abnormally large. I m worried if i just change the css to absolute px sizes that it wont look good on mobile. Can you tell me how to fix?

Also, on mobile the site looks terrible. I used the non-profit theme to start and i think some of the custom css with indenting text etc has affected the mobile view adversely. Also I see you can hide a section for smaller screen sizes but can you just change the background to eliminate the image for instance and use color instead?

please let me know, thank you

#2

Hi there,

Thanks for writing in.

Would you mind providing the site’s URL that has this issue? And please provide some screenshots (desktop and mobile for comparison), visual guide is more efficient finding the issue.

There are global font settings, and there is local font sizing and I need to find what’s font setting is affecting your site’s view.

Thanks!

#3

i added a secure note but it looks like it appended to my first message…

#4

Hi again,

I tried to login but the given credentials are not working. Please double check the credentials. However i checked your site and it looks like you’re using Root Font Size Mode as Scaling in Appearance > Customize > Typography. Either adjust the font size values or switch to Stepped option for defined screen sizes and adjust the font size accordingly.

Hope this helps!

#5

Sorry, the credentials should work now.

I set it to what you said but at 12px the footer widget text is still too small when viewed on desktop or mobile, but if i increase that to 14px the headings become obscenely large.

also, did you have a response regarding the background images not scaling?

please let me know, thank you

#6

Hi There,

I can see you are using Renew. That part font size is set on Renew stack style. To adjust it, we can use custom CSS. See how to do that here: https://screencast-o-matic.com/watch/cbXuis2wHU

.x-colophon.bottom {
    font-size: 14px; /*Adjust this value accordingly*/
}

Regarding background, by default content are responsive. On mobile, the entire section will get longer as the screen width get smaller. Background image will try to stretch to cover entire section height which will make your image sctretch. Since background image option is already available for ROW, what I can recommend is, add the this background image in ROW instead and hide it on mobile view. Then add another ROW, this time use background color and then hide it for desktop view. HIDE DURING BREAKPOINTS option is available under Customize tab of the elements.

Hope this helps.

#7

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.