Changing font size in promobar on mobile view

This topic has 4 replies, 2 voices, and was last updated 2 years, 6 months ago ago by Olga Barlow

  • Avatar: Martine
    Martine
    Participant
    December 2, 2021 at 09:52

    Hi!
    Please check this screenshot: https://www.loom.com/i/515fc9018a444f58832bf0f7a13dc771
    Is it possible to increase the size of the promotext only on mobile view?

    I would actually prefer to divide it into 2 lines on mobile view: first line “Up to 25% discount on our fireplaces” and second line “Free shipping! View offers”.

    Can that be done?

    Please, contact administrator
    for this information.
    3 Answers
    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    December 2, 2021 at 14:30

    Hello,

    There is no special option for this. So, I added below custom to Theme Options > Custom CSS > Mobile

    .mobile-header-wrapper .header-promo-text span {
        white-space: normal;
        text-overflow: unset;
        line-height: 1.3;
    }
    .mobile-header-wrapper .et_promo_text_carousel {
    		--promo-text-height: 90px;
    }

    Check if it suits your needs.

    Regards

    Avatar: Martine
    Martine
    Participant
    December 2, 2021 at 14:37

    That’s a whole lot better! Thank you! Is it still possible to place the link below the text? Now it’s on the right of the text, so the link is out of the picture.

    Avatar: Olga Barlow
    Olga Barlow
    Support staff
    December 2, 2021 at 16:27

    Hello,

    Add the following code in addition

    .mobile-header-wrapper .et-promo-text-carousel a {
        line-height: 1.3;
    }
    .mobile-header-wrapper .et_promo_text_carousel .swiper-slide {
        flex-wrap: wrap;
    }

    Regards

  • Viewing 4 results - 1 through 4 (of 4 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.