Return to previous page

Topic: Changing font size in promobar on mobile view

Martine

Participant

December 2, 2021 9:52 am

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?
Theme version: 8.0.5
WooCommerce version: 5.6.0

Content is visible for topic creator and
support staff only.

#310634 copied to clipboard
Olga Barlow

Support staff

December 2, 2021 2:30 pm
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
#310695 copied to clipboard
Martine

Participant

December 2, 2021 2:37 pm

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.

#310699 copied to clipboard
Olga Barlow

Support staff

December 2, 2021 4:27 pm
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
#310734 copied to clipboard

Viewing 4 results

1 through 4 (of 4 total)

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

8theme system image

Upload your translation files

Click on the desired target language for which you already have a translation.

Choose file (max-size 1mb, zip or rar)

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