Return to previous page

Promo Popup Content (text) Responsive - by Steve03

This topic has 4 replies, 3 voices, and was last updated 7 years, 9 months ago ago by Rose Tyler

Steve03

Participant

February 1, 2017 at 07:07

Hi there!

I have just created a promo popup which works great on desktop but when I view it on mobile (portrait), the text is very crammed and extends out of the popup box. It seems that the paragraph text is not responsive. It looks OK when viewing in landscape.

The image was also not responsive however, I have used the following code obtained from another thread to contain it:

@media (max-width: 767px){
.white-popup-block {
-webkit-background-size: contain !important;
-o-background-size: contain !important;
background-size: contain !important;
}
}

I thought it may have something to do with the padding I added but the “Heading 1” seems to act normally but not anything else – have tried with all others and none act the same way.

I hope you can help..?

Many thanks!

#153616 Copied Theme version: Woopress WooCommerce version: latest

3 Answers
Eva Kemp

Support staff

February 1, 2017 at 13:45
Hello,

Please add this code in Theme Options > Custom CSS > Custom CSS for mobile:
```
#etheme-popup p, #etheme-popup h1 {
    padding-right: 0 !important;
}
```
Regards,
Eva Kemp.
#153642 Copied
Steve03

Participant

February 1, 2017 at 23:46

Thanks Eva.

This fixed the padding issue and now looks somewhat presentable however, could you advise why the content (specifically <p>) is not responsive? As you would have seen, H1 changes size accordingly but P does not..

Thanks again and look forward to hearing from you.

#153708 Copied
Rose Tyler

Support staff

February 2, 2017 at 14:01
Hello,

Try to change previous code to:
```
#etheme-popup p, #etheme-popup h1 {
    padding: 15px !important;
}
#etheme-popup {
    width: 350px;
    height: 400px;
    padding: 0;
}
#etheme-popup p {
    font-size: 14px !important;
}
```
Regards,
Rose Tyler.
#153757 Copied
Viewing 4 results - 1 through 4 (of 4 total)