[Resolved] mobile font size

Home Forums Support [Resolved] mobile font size

Home Forums Support mobile font size

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #1853847
    liz

    Hi,

    I have used the ff. to change the font size on mobile and laptop but it’s not working. I want 18 px on desktop font and 16 on mobile. Thanks.


    @media
    (min-width: 769px) and (max-width: 1024px) {
    body {
    font-size: 16px;
    }
    }

    Website is in the private information field

    #1853954
    David
    Staff
    Customer Support

    Hi there,

    for that to apply to Mobile you need to change your media query from:

    @media (min-width: 769px) and (max-width: 1024px)

    to:

    @media (max-width: 1024px)

    #1854824
    liz

    Hi, David.

    I followed your instruction and I saw that the font changed to 16px in the customizer..but for some reason, the modified font size did not reflect on the mobile screen. Link to the website is in the private info field. Thanks.


    @media
    (max-width: 1024px) {
    body {
    font-size: 16px;
    }
    }

    #1854852
    Elvin
    Staff
    Customer Support

    Hi there,

    Can you specify which exactly do you want this applied on? I’ve checked the site and the paragraph blocks are actually using the specified size as shown here – https://share.getcloudapp.com/QwuAz9nz

    Perhaps you want it to apply on something specific like a heading? Let us know.

    #1856052
    liz

    Hi,

    I can only see the changes in the customizer but not on my mobile phone. If you may, I also want to have a much smaller font for headings on mobile.

    I know how to do it but the changes are not reflected on a mobile screen.

    The link to the website is in the private info field. Thanks.

    #1856159
    Elvin
    Staff
    Customer Support

    Consider doing the following:

    – Try clearing all cache. (perhaps you’re seeing a browser cached version of the site)
    – Try a smaller font than 16px.

    I’ve rechecked the site to be sure and it definitely is using the CSS you’ve added. Perhaps 16px is too big for mobile.

    See this video – https://share.getcloudapp.com/v1uYkrWv

    As shown on the video, the p elements are actually using the font-size from your CSS. I toggled the font-size value to show that it’s actually applying.

    I think you just need to change the @media rule and the font size to this to make it more apparent.

    @media (max-width: 768px) {
    body {
    font-size: 12px;
    }
    }

    The suggested @media change is to make sure it only applies to mobile devices as @media (max-width:1024px) will also apply to large tablets and smaller desktops.

    #1856498
    liz

    Hi, Alvin…I reduced the font size to 14 px for mobile..it worked! Thank you ๐Ÿ™‚

    #1857604
    Elvin
    Staff
    Customer Support

    No problem. ๐Ÿ˜€

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.