Docs

[Loren N]

I’ve just installed this fab little extension with my X theme install. I’ve set up a modal popup and it looks great.

The only issue is that although the text all appears to be responsive, the main header shrinks extremely small. I can’t see what CSS I need to add to force it to be bigger when responsive as my CSS knowledge is limited.

I thought I’d found some other instances of this question in the forums but when I clicked, it just took me to a long list of support answers and I couldn’t find anything relevant.

This is a sample page with the modal activated (without cookies enabled).
http://www.mimosabridal.com/sample-page/

Can you help?

[Jade]

Hi Loren,

Please try to add this code in the custom CSS:

@media (max-width: 480px) {
    .cp-desc-container span span span {
        font-size: 28px !important;
    }
}

Hope this helps.

[Loren N]

Hi,

Thanks for this although it didn’t work. I don’t think the ‘span span span’ bit is right though. Shouldn’t it be ‘.span.span.span’ or something?

[Joao]

Hi Loren,

Please try this code:

@media (max-width: 480px) {

.body  div.cp-modal-popup-container.cp_id_f44d6.cp-special-offer-container > div > div > div > div.cp-modal-content > div > div.cp-row > div > div.cp-desc-container > div > span > span > span {

  font-size: 28px !important;
    }
}

Regarding your .span.span.span question , I will explain you how it works, It tooke me a while to understand as well when I started with CSS customization.

IDs will have # in front

Classes will have . in front

<tags> won´t have anything in front

so as span is inside a tag <span> it does not have a . in front ;

<p> would be just p while <p class=”classy”> would be p .classy

Hope that helps,

Let us know if you need further help with anything.

Joao

[Loren N]

Hi,

Wow, thank you so much for the explanation! It’s awesome. I think I’m going to print it out and stick it on my screen!

Unfortunately, the code still doesn’t work. 🙁

[Rad]

Hi there,

Please try this one 🙂

  @media (max-width: 800px) {

.cp-desc-container > div > span > span > span {

  font-size: 32px !important;
    }
}

  @media (max-width: 480px) {

.cp-desc-container > div > span > span > span {

  font-size: 28px !important;
    }
}

Hope that helps 🙂

[Loren N]

Awesome! That’s better.

Many, many thanks!

[Joao]

You are welcome,

Let us know if you need further help.

Joao

[Author]

Posts