Tagged: , ,

Viewing 4 posts - 1 through 4 (of 4 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

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

You must be logged in to reply to this topic.