Return to previous page

Changing font size in promobar on mobile view

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

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.

#310634 Copied Theme version: 8.0.5 WooCommerce version: 5.6.0

3 Answers
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
#310695 Copied
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.

#310699 Copied
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
#310734 Copied
Tagged: change, font size, mobile view, promobar, templates, woocommerce, wordpress
Viewing 4 results - 1 through 4 (of 4 total)