[Support request] set different font sizes for mobile versus desktop

[dale]

Is there a way to set different sizes body text for mobile within the customizer? I favor larger fonts for desktop and smaller for mobile, and thought switching among desktop, mobile and tablet view in the customizer would allow me to choose different settings for each like it does for the headings, but any change I make in one gets made to all device views. What am I missing?

On a different note, any chance you’re planning to introduce blockquote customization? I do it with CSS, but my blockquotes look pretty messy on mobile.

[Leo]

Hi there,

Currently there is no option to specify font size for mobile so we will need to use some CSS.

Is it just the body text you want to change?

No plans to add blockquote customization but if you can link me to the page I can take a look?

Let me know 🙂

[dale]

Yes, just the body text. The font size, line height and paragraph margin.

May I ask why that’s not part of the customization or if it’s in the plans? It seems like something that would be in demand. Or is mine the only site with a body text that looks fine on desktops but way too big on phones?

This is my blockquote css, fine on desktop and tablet but not on mobile:

blockquote {
	font-size: 100%;
	font-style: normal;
		font-family: 'droid serif';

	border-left: none;
	margin-top: 1em;
    margin-bottom: 1em;
    margin-left: 40px;
    margin-right: 40px;
	padding: 0.25em 40px;
	line-height: 1.75;
	position: relative;
		background: none ;
	color: #333333;
}

blockquote:before {
display: block;
		content: "\201C";
	font-size: 80px;
	position: absolute;
	left: -10px;
	top: -30px;
	color: #7a7a7a;
}

blockquote cite {
	color: #999999;
	font-size: 14px;
	display: block;
	margin-top: 5px;
}
 
blockquote cite:before {
	content: "\2014 \2009";
}

You can see it in use here: https://dalecameronlowry.com/call-for-submissions-chicken-soup-for-the-soul-wants-holiday-stories-due-oct-31/

[Leo]

Body text can be changed like this:

@media (max-width: 768px) {
    p {
        font-size: 10px;
        line-height: 0.5;
        margin-bottom: 1em;
    }
}

It hasn’t been requested very often. We will put into consideration for sure 🙂 Thanks for the suggestion!

Maybe you can wrap the block quote CSS to apply to tablet only?

@media (min-width:769px) {
    /*CSS here*/
}

More info here: https://docs.generatepress.com/article/responsive-display/

[dale]

Thank you! The p tag worked for shrinking a lot of the post body text, but I use lots of lists and blockquotes, so is there a tag I can use other than p so the formatting applies to all non-header body text? Or do I need to repeat for each: ul, ol, blockquote … And what about post meta? Those are still fairly large on mobile.

Thanks!

[Leo]

Any chance you can provide the specifics of what you would like to change? Maybe identify it in screenshots?

Some of your content is getting style from Elementor so it would need to be done from their end.

I can help you with the ones that are getting the styles from GP 🙂

[dale]

In my experience, by default Elementor inherits typography settings from the overall website CSS. It won’t override my typography unless I use Elementor-specific typography settings, which I only do on two pages on my website. One of those is the homepage, which is probably why it’s misleading you …

Here is a webpage that uses blockquote and ul tags in the html: https://dalecameronlowry.com/submission-call-alternate-histories-jewish-people-due-feb-4/

If you look at it in mobile view or a screen size narrower than 769, you’ll see that the blockquote, ul, and meta text are all much larger than the p (paragraph) text. p font size is set at 13px, everything else is default 17px for desktops.

[Leo]

Try this:

@media (max-width: 768px) {
    blockquote {
        font-size: 10px;
    }
    li {
        font-size: 10px;
    }
}

[Author]

Posts