Black Friday Sale! Get $20 off GP Premium, $40 off our new Lifetime license, and 45% off license renewals/extensions! Learn more

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

Home Forums Support set different font sizes for mobile versus desktop

  • This topic has 7 replies, 2 voices, and was last updated 3 years ago by Leo.
Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #415753
    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.

    #415850
    Leo
    Staff
    Customer Support

    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 🙂

    #417051
    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/

    #417166
    Leo
    Staff
    Customer Support

    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/

    #418496
    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!

    #418580
    Leo
    Staff
    Customer Support

    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 🙂

    #418708
    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.

    #419016
    Leo
    Staff
    Customer Support

    Try this:

    @media (max-width: 768px) {
        blockquote {
            font-size: 10px;
        }
        li {
            font-size: 10px;
        }
    }
Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.