Home Forums Air HTML5 Template Create class to resize h1 in mobile

Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #22904
    martalongan
    Participant
    Purchased
    Expired

    Hello!

    I have a problem with the size of the fonts on my website when they are displayed on mobile, what can I do? they don’t get small 🙁

    Thanks!

    #22905
    martalongan
    Participant
    Purchased
    Expired

    Sorry, my web is: http://www.martalongan.es and the problem is here: https://www.martalongan.es/index.php/sobre-mi/ the text:
    +10 years of experience is a giant in mobile, for exemple…

    #22911
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    I checked your website, I found you use inline font size 60pt. Please try to use VW unit, like font-size: 9vw;

    Regards!

    SeaTheme – SeaTheme.netTwitterFacebook

    #22925
    martalongan
    Participant
    Purchased
    Expired

    Thanks for your quick response 🙂

    It is a good solution but for the mobile to look the correct size in the desktop version it must be giant and it does not look good 🙁

    Can I make the mobile have one size and the desktop another?

    Thanks! 🙂

    #22926
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    Please remove the font-size from the inline style, use the class, like :
    <p><span class="h1-custom" style="font-family: Sen; color: #030814;">años de experiencia</span></p>

    Define font size by the custom CSS(“Appearance > Customize: Additional CSS”), like:

    .h1-custom{
      font-size: 7vw;
    }
    @media(max-width:767px) {
    /*mobile*/
      .h1-custom{ font-size: 5vw; }
    }

    Regards!

    #22931
    martalongan
    Participant
    Purchased
    Expired

    Great! now yes, solved.

    Thank you!

    #23579
    pawlakstawarski
    Participant
    Purchased
    Supported

    Hello,
    I added custom class:

    .podpis-zdjecia{
      font-size: 9px;
    }
    @media(max-width:767px) {
    /*mobile*/
      .podpis-zdjecia{ font-size: 4px; }

    to change font size on mobile but it doesn’t work. Can you check it? On desktop font size is changing properly.
    new.pawlakstawarski.com/arch/

    #23584
    SeaTheme
    Keymaster
    Purchased
    Expired

    Hi,

    This topic is for the Air HTML template.

    The CSS will not work for ART WordPress theme
    Please refer to how to set font size for mobile(BM content builder): https://doc.seatheme.net/sea-content-builder-plugin/text-module/#font-size-for-mobile

    Regards

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.

Join Newsletter(FREE)

Subscribe to our newsletter to receive news & updates. We promise to not spam you, super promise!