ConvertPlus changes modal font size on mobile

Support
#1

Hello,

Hopefully you could help with with this ConvertPlus-related problem. I love this plug in. But it has this annoying feature. On mobile, it automatically reduces the font size of inline modals. I suspect it has to do something with the modals being mobile responsive. But this does not look good because the modal font becomes smaller than the body of the text surrounding it, while it should be the other way around.
When I insert the modal in the middle of my blog post, I want it to stand out with a slightly larger font.
That’s why I would love to disable this responsive feature. Is that at all possible?
Thank you.

#2

Hello @kamilzwolski,

Thanks for writing in!

Have you disabled the modal in Cornerstone as I don’t see the same on your website? Can you please re-activate the same again.

Thanks.

#3

Thank you. No, haven’t disabled it, it’s there in the middle of every post. You can quickly find it on the website by searching for ‘Instantly download Angie’s’

#4

Hi @kamilzwolski,

To change the font-size, you can add this in Theme Options > CSS

@media(max-width:979px) {
.cp-modal-every-design .cp-info-container {
    font-size:18px !important;
}
}

Hope that helps

#5

Thank you, I pasted this code into Theme Options > CSS and also in Customize -> Additional CSS. None of those codes makes a difference to the font size of the modal.

I actually like the font size of the modal as I set it in ConverPlus. I just don’t want it to change on mobile to this tiny font. Would that be possible?

#6

Hi @kamilzwolski,

I must have misinterpreted what you are referring to.

Can you provide us a screenshot of the text that you are referring to and how it looks in your end.
This is to ensure that we can provide you with a tailored answer to your situation.

Thank you.

#7

No problem, here are the screenshots. The first one is from mobile. The second is desktop. You can see how the modal font is larger on Dekstop and much smaller on mobile. In fact, the modal footer on mobile (‘I hate SPAM…’) is the same size as the main text!

#8

Hi @kamilzwolski,

Still a bit confusing, because it looks bigger on mobile like in your screenshot. Which makes it even since it only looks smaller on desktop as your screenshot because of screen size.

And I checked the code and they are both 14px font size (mobile and desktop). But I’m not sure what settings you already have in your ConvertPlus setting in admin. Would you mind providing your admin login credentials in the secure note? I like to test and compare them first.

Thanks!

#9

OK, let me clarify a bit further: In the desktop version, you can see how the font size of the modal (‘Instantly download…’) is relatively larger than the size of the footer (‘I hate SPAM…’). That’s how it should be. I want the size of the modal font to be larger. That’s why I set it this way in ConvertPlus settings.

But when I load the mobile version, the modal font appears relatively large for the first second or two, but then it shrinks suddenly to this tiny version that you can see in the screenshot. In the mobile screenshot, you can see that the font size of the modal (‘Instantly download…’) is actually the same size, if not slightly smaller, than the size of the footer (‘I hate SPAM…’). And it also looks smaller than the size of the body of the surrounding text.

I don’t like it this way, and I would much rather prefer that the font size on mobile remains proportionally bigger than the size of the footer, like it is on the desktop. Does it make sense?

I can give you login credentials, just let me know how.

#10

Hi @kamilzwolski,

Ah I see, you’re referring to the text not available from my view. Because all I saw was subscription form and text I hate SPAM.... In that case, yes please provide your admin login credentials in the secure note. And please provide the exact URL where your screenshots are taken.

Thanks!

#11

Thank you, done.

#12

Hi there,

I checked and it’s automatic, the only solution is overriding it with custom CSS.

    .cp_id_522d8 .cp-description .cp_responsive.cp_font {
font-size: 23px !important;
}

Please add it to Theme Options > CSS

Thanks!

#13

Thank you, that’s perfect!
One more question if possible please: on mobile, there is white space (padding?) on the left and right of the modal. Is it possible to decrease it in line with the main body of the text?
Thank you!

#14

Hi @kamilzwolski,

Sure, please add this as well

@media ( max-width: 767px ) {
.cp-modal-inline .cp-modal {
    max-width: 100% !important;
    width: 100% !important;
} 
}

Hope this helps.

#15

Thank you, now it looks perfect!

#16

You’re most welcome!

#17

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.