text size does not fit well for mobile

  • Hi,

    I think the theme does not scale down text size and images well enough on mobile and small screens. The logo and hamburger do but the rest of the text and images remain very big in my opinion.

    Is see all kind of magnificant css code. Is there any change using this site wide css codes to downscale text and images for smaller screens and mobile automatically?

    Thank you,

    The page I need help with: [log in to see the link]

Viewing 2 replies - 1 through 2 (of 2 total)

  • The easiest way to adjust the font size of all global elements would be to adjust the root font size on small screens. For example, CSS like this would make all text on the site smaller on screens that are less than 652px wide: 

    
@media screen and (max-width: 652px) {
	html { font-size: 0.5rem }
}

    Changing the root font size is typically not a great thing to do for accessibility reasons though (users who use zoom features expect this to be a standard value). A preferable alternative would be to change the rem values of each of the theme’s font-size CSS variables: 

    
@media screen and (max-width: 652px) {
	:root {
		--global--font-size-base: 1.25rem;
		--global--font-size-xs: 1rem;
		--global--font-size-sm: 1.125rem;
		--global--font-size-md: 1.25rem;
		--global--font-size-lg: 1.5rem;
		--global--font-size-xl: 2.25rem;
		--global--font-size-xxl: 4rem;
		--global--font-size-xxxl: 5rem;
	}
}

    This also gives you more fine-tuned control, if that’s what you’re looking for. You may need to adjust values for larger screens too though, since some of these variables are used there.

    The images are more complicated —?those would probably need to be adjusted on a case-by-case basis.

    Thread Starter ariextreme

    (@ariextreme)

    Many thanks Kjell. This helps to understand these better and to adjust properly.

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘text size does not fit well for mobile’ is closed to new replies.