Modal popup is getting cropped on mobile?

Support
#1

So I’m using Covert Plus and the modal popup to add an age verification to my website.

It works fine on the desktop but on mobile my “Accept” button overlays on top of important text.

How would I fix this? This Modal popup is a bit hard to work with…

I’d like to be able to put the “I Accept” at the bottom middle inside the popup, but I can’t figure out how to do anything to make it work other than anchor it in the top inside corner.

#2

Hi There,

Please add this CSS to Your theme option -> CSS and let us know if that works.

@media (max-width: 767px) {
.cp-blank .cp_responsive {
padding-top: 6px !important;
}
}

Hope this works

#3

Hmm I added it, but mobile seems to be unaffected?

Isn’t there a way to position it in the bottom middle? That would take care of the problem and look in place more.

#4

Hi There,

Sorry for this.
there is a correction in the css.

@media (max-width: 767px) {
.cp-blank .cp_responsive {
padding-top: 60px !important;
}
}

Hope this works

#5

Ok so that did work and uncover the text, thanks.

But it just looks so out of place in the top right hand corner.

How can I force it to the bottom middle of the popup?

#6

Hi There,

Please update the previous CSS to this:

@media (max-width: 767px){
    .cp-blank .cp_responsive {
        padding: 55px 0 30px !important;
    }
}

Hope it helps :slight_smile:

#7

Ok great, thank you!

Is there no way to get the I Accept button at the bottom below the words Thank you! ?

#8

Hi John,

Please update the code to:

@media (max-width: 767px){
    .cp-blank .cp_responsive {
        padding: 55px 0 30px !important;
    }

    .cp-overlay-close.cp-inside-close {
        top: auto !important;
        bottom: 15px;
    }
}

Here are some related links for further reading:

Hope this helps.

#9

Ok we almost have it! We just need to push it down a little further & center it.

I tried changing the bottom: 15px to 30px but it didn’t seem to push the button down any further?

#10

Hi There,

Please change the previous CSS to this:

@media (max-width: 767px){
    .cp-blank .cp_responsive {
        padding: 20px 0 60px !important;
    }

    .cp-overlay-close.cp-inside-close {
        top: auto !important;
        bottom: 15px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }
}

Regards!

#11

Yes that’s it!! Damn you guys are the best support around! Definitely renewing my subscription.

How can I do the same thing with the I accept button centered at the bottom for the desktop version as well?

Thanks again!

#12

Hi John,

What subscription?

To apply the CSS code that Thai’s provided to desktop, please remove the @media query that is wrapping it.

e.g.

  .cp-blank .cp_responsive {
        padding: 20px 0 60px !important;
    }

    .cp-overlay-close.cp-inside-close {
        top: auto !important;
        bottom: 15px;
        left: 50% !important;
        right: auto !important;
        transform: translateX(-50%);
    }

That should make the code applied to all screen-sizes.

CSS @media Rule

Cheers!

#13

Ok yes that worked perfect and now the I Accept button is where it is supposed to be!

Thanks again guys, couldn’t have done it all with out your great customer support.

And by subscription I mean extending the extra tech support, don’t we only get like 6 months or 1 free year to the Support Forum when we buy an X or Pro theme?

#14

Hello John,

Thanks for updating the thread.

Please take a look at the reply posted in following thread regarding support extension.

Thanks.

#15

Hmm this seems to have reverted on mobile?

It’s fine on desktop.

#16

Actually now it seems desktop is also affected & reverting back, at least in chrome?

#17

Hi There,

I checked the popup and its looks fine in mobile and desktop.
Can you please confirm if you have fixed it in your end.

Thanks

#18

Yeah I figured it out I must have accidentally deleted part of the code, which I re-added and now all is working properly again.

Thanks again!

#19

Glad to hear that. :slight_smile:

#20

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