Archives

Home Forums Search Search Results for 'mobile body font'

Search Results for 'mobile body font'

Home Forums Search Search Results for 'mobile body font'

Viewing 15 results - 1 through 15 (of 130 total)
  • Author
    Search Results
  • #1937699
    [Resolved]

    Topic: body typography mobile

    in forum Support
    Irmgard

    Hello, I think I don’t get it. Is it true, that I need to use css in order to change the body font size for mobile devices? I could not find it in the customer typography settings in GP pro? Thanks for your help. Rgds,

    #1907762
    Michael

    I’ve got custom header elements on my site, and I’ve made the font sizes relative (em) and the distancing from top and bottom relative (% not pixels) but if I resize my browser, the title part goes over the main body and the identity text doesn’t seem to change position relative to the size of the browser window. Is there a better way to do this?

    Obviously beyond a certain size it will switch to mobile view, but above that it starts looking screwy until it’s at 100$

    Any help, as always, gratefully received.

    #1904752
    [Support request]

    Topic: Text too small to read

    in forum Support
    Ramsha Afzal

    Hi,

    My site is getting error “text too small to read” for mobile usability in Google search console.

    Previously, the two pages had same error and I put the following code in the additional CSS and after that those pages were fixed. But now another two pages are giving the same error despite the placement of this code:

    body {
    font-size: 1.25rem!important;
    line-height: 1.63em!important;
    }

    #1888484
    Ying
    Staff
    Customer Support

    Ah I see, then you only need this CSS for mobile:

    @media (max-width: 768px) {
    body .entry-content p {
    	font-size: 18px !important;
            line-height: 28px !important;
        }
    }
    #1888354
    Tony

    Hi Ying,

    i’ve corrected the above css and still the line height on mobile view for posts = 40px. however,

    i’ve changed the css and added the following….

    body.single-post .entry-content {
    font-size: 20px;
    line-height: 40px;
    font-weight: 400;
    }


    @media
    (max-width: 768px) {
    .entry-content {
    font-size: 18px;
    line-height: 28px
    }
    }


    @media
    (max-width: 768px) {
    body.single-post .entry-content {
    font-size: 18px;
    line-height: 28px
    }
    }`

    i had to add another @media specifically for posts on the last bit of code, otherwise the top part did not work on its own and would not apply to posts.

    the above works now. question is, can we make the css shorter and have the same effect?

    #1887838
    Tony

    hi Gp,

    i’m trying to have the same font size and line height as below for all my website on mobile view. I understand the below applies only to posts, but I would like it to apply to all content with the same values, excluding the footer and header. can you adjust the css for me please? thank you.


    @media
    (max-width: 420px) {
    body.single-post .entry-content {
    font-size: 18px;
    line-height: 28px
    }
    }

    use temp login if the need be. thank you.

    #1884542
    [Support request]

    Topic: Body font-size options for mobile/tablet

    in forum Support
    deep_blue

    There is desktop/tablet/mobile font-size options for headings, however it is not available for the body content. As such we need to add custom css for the same.

    It would have been easier if this option was provided.

    Thanks!

    #1868832

    In reply to: How to Edit Text

    ABCD

    It’s fine but size issues are visible as this becomes normal heading in the tab and mobile version , how to fix it??

    checked through browser tool and seems it’s due to this CSS –


    @media
    (max-width: 768px)
    body.single h3 {
    font-size: 16px;
    }

    but if I change it another part will affect so how to make the size big for a specific title ??

    #1865550
    Marco

    kind of got it to work by adding a parent container first:

    .inside-header .secondary-navigation {
    	background: none;
    }
    
    .inside-header .secondary-navigation .main-nav ul li a,
    .inside-header .secondary-navigation .menu-toggle,
    .inside-header .secondary-menu-bar-items .menu-bar-item > a {
    	color: #515151;
    }
    
    .inside-header .secondary-navigation .main-nav ul li a {
    	font-size: 15px;
    }
    
    .inside-header .secondary-navigation .main-nav ul li:hover > a, .secondary-navigation .main-nav ul li:focus > a, .secondary-navigation .main-nav ul li.sfHover > a, .secondary-menu-bar-items .menu-bar-item:hover > a {
    	color: #7a8896;
    	background: none;
    }
    
    body button.menu-toggle,
    body button.menu-toggle:hover {
    	border-radius: 0;
    	background: none;
    }

    one other issue I’m having is that when I use the secondary navigation as main navigation on a certain page there won’t be any mobile menu on that page – do you have any idea how I could work around that?

    thanks

    #1856159

    In reply to: mobile font size

    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.

    A wise man once said:
    "Have you cleared your cache?"

    #1854824

    In reply to: mobile font size

    liza

    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;
    }
    }

    #1853847
    [Resolved]

    Topic: mobile font size

    in forum Support
    liza

    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

    #1851206

    In reply to: Font Size Problem

    Leo
    Staff
    Customer Support

    But when i open the website with my phone, then all this text have the same size.

    That’s not what I’m seeing.

    The breadcrumbs font-size on mobile is the same on desktop at 16px from your CSS:
    https://www.screencast.com/t/oXt6AgOveA

    The body text is at 18px from your CSS:
    https://www.screencast.com/t/kWVo0E3WpV

    And footer widget is at 14px:
    https://www.screencast.com/t/ftfYDbpvbPkd

    #1850850
    Sean

    Thanks David. I was trying to figure out how to change when the footer columns and header/body/footer font sizes change. Does that have to be done via custom CSS or are there built-in options somewhere in GeneratePress?

    Also, I am building the content exclusively with GenerateBlocks Pro, so it sounds like changing those breakpoints (for when the Desktop/Tablet/Mobile settings are triggered for the GenerateBlocks blocks) is not in GeneratePress, but rather in GenerateBlocks?

    #1850817

    In reply to: Font Size Problem

    Sonja

    Hi David,

    yes this css makes the body text a bit smaller on mobile.

    But the on Desktop the fontsize are as followed:
    Breadcrumbs: 16
    Body: 20
    Footer Widgets: 24

    But when i open the website with my phone, then all this text have the same size.

    Why is that?

Viewing 15 results - 1 through 15 (of 130 total)