Viewing 15 posts - 1 through 15 (of 15 total)
  • Author
    Posts
  • #1360875

    On several pages, I created a title bar using the colored background (w/image) and then placed title text on top of it and changed the font size to 72px While it looks great on large screens on mobile devices that text is not responsive, in fact, it keeps its original large screen size of 72px and depending on the device will do one of the following…
    1.) Stack text on top of each other.
    2.) Move text to the next line, but overlaps the lines to text, so they are displayed partially on top of each other
    3.) Does nothing and the text is displayed off the screen.

    I should note that I created a custom ID and CSS class for the text element in order to add a drop shadow to the text, but removing those settings completely did not change the display issue.

    I, also, set mobile font sizes manually in the layout settings of the text element. Those settings are being ignored and do not appear in the mobile versions. They don’t appear in the emulators or real devices.

    I’ve read all the documentation, and I can’t seem to figure out why these settings are being ignored and why this set of text is not responsive.

    You can see the issue on the following pages.

    Thank you!

    #1360892

    Hey Sozo,

    I’m not sure if I fully understand the problem you are having, but I’m guessing that you are referring to the page in private? If that is the case, then you have added the heading manually with the font size inline. Styling/CSS which is added inline will almost always override other CSS:

    <h1 style="text-align: center;"><span style="font-size: 72px;">Our Store Policies</span></h1>

    Maybe you could try using a Special Heading element instead?

    Best regards,
    Rikard

    #1360904
    This reply has been marked as private.
    #1360928

    Hi,

    First of all, please try to calm down a little bit. If you don’t understand something, then it’s better to ask. I’ve made a test page for you, so that you can see what happens when you add CSS inline. The first header is a copy from your site, the second one is a Special Heading element from the Layout builder, and I’ve specified font sizes for different screen sizes in the theme options:

    https://wpexpert.se/enfold/header-test-page/

    As you can see, your heading is displayed at 72 pixels on all screen sizes, since the inline CSS has priority over other CSS, unless you have added !important to it. And as far as I can see, you have not specified font sizes for any other screen size. Are you suggesting that we override the styling you have added yourself? If so, then even the 72 pixel setting which you have added, would not be respected.

    About the paragraphs on the other two page; I can’t see that you have made any font size settings on either page. Could you try to explain the problem a bit further?

    Best regards,
    Rikard

    • This reply was modified 1 week, 5 days ago by  Rikard.
    #1360947
    This reply has been marked as private.
    #1360949
    This reply has been marked as private.
    #1360975

    Hi,

    I tried your suggestion, and as I indicated before, it did not work. Adding the font size in css or inline makes to difference, the mobile settings are not responsive The font, remains at 72px on every screen.

    But that is exactly what my example page showed you. If you add inline CSS, that will apply instead of any theme setting, since that CSS has a higher priority. If you don’t understand how CSS priority works, then please try to do a bit of research online.

    This page will answer your question in the screenshot: https://wpexpert.se/enfold/text-block-font-sizes-example/

    Not at all, I’m simply suggesting that when you design a website, it’s designed for the largest screen first, then the responsive settings adjust all the page elements to fit the appropriate size. That 72px value would still be there for the larger screens and naturally, adjust to smaller screens. That is how responsive websites are supposed to work.

    You have explicitly told an element to be 72 pixels, with no further specification. How exactly should the theme then know when you want it to change, and on which screen sizes?

    Best regards,
    Rikard

    #1360978
    This reply has been marked as private.
    #1360983
    This reply has been marked as private.
    #1360985
    This reply has been marked as private.
    #1360996

    Hi,

    Thanks for expressing your opinion. I’ve given you examples of how the theme works, if you need further explanations to that, then please try to ask direct questions.

    Best regards,
    Rikard

    #1361000
    This reply has been marked as private.
    #1361013

    Hi,

    Thanks for the apology, it’s appreciated. If I suggest a to use a different element or a different way of doing something, it’s not to be rude. I’m only trying to help you out to have a better interaction with the theme.

    Please help me understand why the special headings element works and the text element I was using does not. I do understand that only putting the 72px value in and nothing else means everything is set to 72px I’m confused about this part though….Each of those elements has the same text size component, where you can leave it blank or insert your desired text size for each screen size. I did that on the text element I initially used but it didn’t work. I had only placed text sizes in the last two screen sizes previously, but in the special headings element, I went ahead and filled in the size for each screen. Could that be part of the problem? Must you fill in all the text sizes for it to work properly?

    This is what I tried explaining with the first test page I linked to. If you add inline CSS to any html markup, then in most cases it will override any other CSS which is trying to set the same value. I’ll try a different example:

    //This text will override theme settings, and will always show at 70px
    <h1 style="font-size: 70px;">My heading</h1>
    //This text should get its size from the theme settings
    <h1>My heading</h1>

    Special Heading element – will get its styling from the theme settings. You can set the responsive font sizes under Enfold->General Styling->Typography. You can also set styling under Enfold->Advanced Styling.

    Text Block element with responsive font settings – If you use a Text Block element and you set font sizes for each screen size in the element options, then that should override the general theme settings. Please note that you need to set values for all screen sizes, otherwise the last value set will apply to smaller screens.

    I hope that explains it a bit clearer.

    Best regards,
    Rikard

    #1361027
    This reply has been marked as private.
    #1361071

    Hi,

    Ok, I see how that could be confusing. The inline CSS of 72 pixels would take priority in that case.

    I’ll close this thread for now then, please open a new thread if you should have any further questions or problems.

    Best regards,
    Rikard

Viewing 15 posts - 1 through 15 (of 15 total)

The topic ‘Mobile Font Issues’ is closed to new replies.