Tagged: , ,

Viewing 25 posts - 1 through 25 (of 25 total)
  • Author
    Posts
  • #1037759

    Hi,

    I love the Enfold theme, but there is one area where I always end up spending way too much time on and that is Font size and padding management for mobile devices. Every time I build a website using Enfold, I am always frustrated by how much time I spend to have the website looking just right on mobile. Usually, fonts and padding of elements are too big for mobile.

    I know that you can control how each individual special heading looks on mobile, but too me it makes no sense to manage H1 individually for each page. Yes, I usually have to dig into the CSS and enter my own media display rules for each screen size, and that takes time. Especially with padding issues.

    What I am suggesting is having a styling section just for mobile, and then include the most popular devices so that a web designer/developer can just go to that screen and start formatting:

    iPhone X, 8, 6
    – H1 font size x, line-height x, bottom-margin x
    – H2 font size x, line height x bottom-margin x
    – section padding: x px

    iPad
    – H1 font size x, line-height x, bottom-margin x
    – H2 font size x, line height x bottom-margin x
    – section padding: x px

    I truly believe that adding such a feature would make the Enfold theme even better and more user-friendly

    Thanks,

    Eric

    #1038159

    Hey xuamox,

    This can be easily adjusted with css and media queries. All you need is some css knowledge. And you can reuse the code from one website to another.

    Could you please attach some screenshots of the issues that you’re struggling with most of the time?

    Best regards,
    Victoria

    #1038184

    Here is an example.

    This website looks great on a desktop, but the home page text size and spacing is too large on a mobile device.

    Yes, I can go in a fiddle with the css, but it’s not that easy to locate all the selectors and sometimes selectors conflict or have priority issues and it can be time-consuming, and ultimately take more time to do it this way. You guys know what all the selectors are and could provide a quick tool that adjust everything for mobile.

    If I could say make all the spacing and headings sizes 30% smaller on mobile under 480px with one click, that would save time and money for clients.

    I am just pointing out one of the bigger pain points when using enfold.

    #1039511

    Hi,

    Thanks for the update, though it’s not all that easy for us either even though we know most classes and IDs in the theme. They still have to be found and added. If you want to target and make headers smaller on mobile screens then you can try this CSS:

    @media only screen and (max-width: 479px) {
    h1, h2, h3, h4, h5, h6 {
      font-size:70% !important;
    }
    }

    Best regards,
    Rikard

    #1182900

    Hello Rikard
    I have a related question to this topic. I have set the sizes for h1 – h5 and body font p tags and line heights for each,in the Enfold general styling settings, which is fine on desktop. I would like to set different font sizes for all these for mobile and different line-heights, in some cases a different font. I tried your suggestion and others in the forum like this one to change size to start:
    @media only screen and (max-width: 767px) {
    h1{
    font-size: 13px !important;
    }}
    but none work on mobile. There’s no change.
    How can I do this?
    Thanks

    #1183033

    Hi s29ers,

    We need to be able to inspect the element in question on your actual site in order to help you, please post a link to where we can see the problem.

    Best regards,
    Rikard

    #1191329

    Hi Rickard
    Your help much appreciated.
    Thanks

    #1191333

    Sorry, there is no specific page; if I added the above css, it should affect all pages. Nothing changes on any page.

    #1191382

    Hi s29ers,

    Thanks for that. I checked your front page but you don’t have an h1 element on it. Could you link to the page where you are testing this on please?

    Best regards,
    Rikard

    #1191645

    Hi Rikard,

    Sorry about that. I fixed it now. The title is H1 on the homepage.

    When I apply the code

    @media only screen and (max-width: 767px) {
    h1{ font-size: 80% !important;
    }}

    it works if I set a fixed pixel size like 20px. But it will not work if I use the percent as above.

    Please advise,

    Thanks

    #1192102

    Hi s29ers,

    It seems to be working fine on my end, the CSS you posted is applying and the font size is smaller on mobile screens.

    Best regards,
    Rikard

    #1192438

    Hi Rickard, sorry it is not working. I attach two links from Android. On desktop, the font size is 48px. If I use 80% or 90%, yes it’s smaller but it’s smaller than the body text which is wrong. If I set say 40px instead of %, it works fine. So it’s not working.

    #1193569

    Hi s29ers,

    Try using em, like:

    
    @media only screen and (max-width: 767px) {
        h1{
         font-size: 2em !important;
       }
    }
    

    this way you can come up with the value that works for you.
    Best regards,
    Victoria

    #1194733

    That’s exactly what I am talking about. Have a simple way to set some different values for mobile devices! It would save a fair amount of time.

    #1194888

    Hi xuamox,

    You can use the code above as a template and set the values that you need.

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1217836

    Hi guys I tried everything but nothing is working on my website.
    I cannot change h1 and h2 height

    #1217982

    Hi phoenixdivers-kohlanta,

    Please start a separate thread, describe your issue there and give us a link to your website.

    Please explain what changes do you need? Change the font size or line height?

    Best regards,
    Victoria

    • This reply was modified 4 years, 6 months ago by Victoria.
    #1221025

    Hi Victoria, Thanks for the tip. I got it working. On a related question, I have also set up a class that has specific font size, family, weight etc. However I can’t figure out after searching, how to use the sane class name but have a different version it apply to mobile so I don’t have to duplicate all the content to apply a mobile version of that class. Any suggestion on how this could be done? Thanks

    #1221505

    Hi s29ers,

    You can do that by adding the class in a media query:

    @media only screen and (max-width: 767px) {
      .your-class {
        mobile specific styling goes here
      }
    }

    Best regards,
    Rikard

    #1224118

    Great! Thanks Rickard.

    #1224166

    Hi s29ers,

    Glad we could help :)

    If you need further assistance please let us know.
    Best regards,
    Victoria

    #1256846

    Thanks for all your tips on this item.

    #1256948

    Hi,

    Did you need additional help with this topic or shall we close?

    Best regards,
    Jordan Shannon

    #1264057

    You guys can close this topic. Thanks.

    #1264080

    Hi,

    If you need additional help, please let us know here in the forums.

    Best regards,
    Jordan Shannon

Viewing 25 posts - 1 through 25 (of 25 total)
  • The topic ‘ENFOLD – Font & Padding management for mobile devices’ is closed to new replies.