Content area and convertplug modal responsive width (PRO)

Support
#1

Hi guys, i have a content area on my footer that only has an opt-in form in there (convertplus modal popup inline shortcode) now, i would like for the content area to stretch to the width of the modal which it doesn’t right now (i can only guess it stretches to the width of the entire TEXT length)

I know i could just add something like “width: 500px” or something like that, but i’d like a more responsive approach if possible.

Thanks in advance!

EDIT: I found out that the problem doesn’t seem to be the width but the actual element (although i still don’t know if it’s the content area or text element or the shortcode content)

#2

Hi there,

Thanks for writing in.

I couldn’t login to check the issue due to 2 factor authentication, clicking skip isn’t working either. And I got this message

Warning: A non-numeric value encountered in /***/public/wp-content/plugins/ithemes-security-pro/pro/two-factor/class-itsec-two-factor-on-board.php on line 65

Also, please inspect the text element where your form is, then change its max width to auto instead of 500. Or apply new width value.

Thanks!

#3

Hi, you can access now, sorry about that.

and i added a width while testing, but that didn’t change anything.

#4

Hi,

To fix it, you can add this in Footer > CSS

.footer-optin .cp-row {
   margin-left:0;
   margin-right:0;
}

.x-colophon .cp-modal-inline .cp-modal {
    margin:0;
}

.x-colophon .cp-form-container {
    margin:0;
}

@media (min-width: 1200px) {
.footer-optin  .cp-module .col-lg-4 {
    width: 40%;
}

.footer-optin  .cp-module .col-lg-8 {
    width: 60%;
}
}

Hope that helps

#5

I added a few modifications to the code but it certainly helped a lot!

thank you.

#6

You’re welcome! :slight_smile:

#7

I’m sorry to bother you guys, i don’t know why, but it was working well before and this morning i wake up to this: http://prntscr.com/j8wm01

could you help me?

#8

Hi there,

Yes, a bit weird. The button is actually bigger, but the background color doesn’t follow it, it remain on that size.

Please try adding this work around.

.content-5addce97a51fe .cp-form-container .cp-submit.cp-btn-flat .cp_font {
position: relative;
    left: -12px;
}

Thanks!

#9

Unfortunately that didn’t change anything.

#10

Hi,
Please try adding this CSS snippet into this page specific CSS area in Cornerstone:

.cp-form-container .cp-submit.cp-btn-flat .cp_font {
    position: relative;
    left: -12px;
}

Thanks.

#11

that sort of fixed it, but the main issue here is that the blue button should be bigger, and there’s something that’s making it smaller here, any ideas about what could it be?

#12

Hi,

I narrowed this issue down to the custom size you set in the modal settings:

Depending on the parent container width of the place you put this shortcode in, such a problem might occur, to prevent this issue, I wrapped the shortcode with a div of 450px width like this:

<div style="width:450px;">
     [cp_modal display="inline" id="cp_id_11df4"][/cp_modal]
</div>

And I’ve removed all previously mentioned CSS snippets, you can see the button is looking fine now:

Thanks.

#13

than you so much!!!

all this issue for a missing container!

#14

You are welcome :slight_smile:

#15

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