-
Posts
-
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 pxiPad
– H1 font size x, line-height x, bottom-margin x
– H2 font size x, line height x bottom-margin x
– section padding: x pxI truly believe that adding such a feature would make the Enfold theme even better and more user-friendly
Thanks,
Eric
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,
VictoriaHere 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.
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,
RikardHello 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?
ThanksHi 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,
RikardSorry, there is no specific page; if I added the above css, it should affect all pages. Nothing changes on any page.
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,
RikardHi 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
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,
RikardHi 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.
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,
VictoriaThat’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.
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,
VictoriaHi 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
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,
RikardHi s29ers,
Glad we could help :)
If you need further assistance please let us know.
Best regards,
Victoria
- The topic ‘ENFOLD – Font & Padding management for mobile devices’ is closed to new replies.