Hide ConvertKit Pop up box on specific pages

Site URL: https://realfoodginger.com

Hi there!

I've search all over and can't seem to find the code to hide a ConvertKit pop up on specific SquareSpace pages.  I would think this would be a popular thing to need, but I spent over an hour searching and can't find a darn thing about it. I have some opt-in pages on my site and don't want a different opt-in to distract someone...  Any help would be appreciated!

I have SquareSpace 7.0 Pacific theme and using the Poplar modal on ConvertKit.

TIA!

p.s. ignore the formatting of the pop up box - that is being updated shortly.

Add to Page Header (page where you want to hide popup) 

<style>
  .formkit-overlay {
    opacity: 0 !important;
}
</style>

Oh my gosh, thanks so much, Tuanphan!! 

On 6/1/2021 at 10:52 PM, realfoodginger said:

Oh my gosh, thanks so much, Tuanphan!! 

Do you want to solve these?

Site URL: https://healthfulginger.com/

1. (Mobile-Start here) Move image to top of text?

2. (Tablet-Start Here) Align 3 buttons?

3. (Mobile-Overlay Menu)

Haha you're finding all my issues!  I certainly wouldn't mind fixing those!

22 hours ago, realfoodginger said:

Haha you're finding all my issues!  I certainly wouldn't mind fixing those!

Add to Design > Custom CSS

/* mobile */
@media screen and (max-width:640px) {
/* start here */
div#page-5b339b1df950b7fadb98d170>.row {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}
/* tablet */
@media screen and (max-width:900px) and (min-width:641px) {
/* start here align 3 buttons */
div#block-yui_3_17_2_1_1530109655602_4446+.row .html-block {
    min-height: 350px;
}
}

Thanks Tuanphan!  Unfortunately most of it didn't change.  The first testimonial image comes up first, but then the second one moved to the bottom.  And then I also don't see a difference in the toggle or in the alignment in the tablet view.  I'm not too worried about these though.  The third image I added is a little more concerning to me as it shows the incorrect image with the text.

I also noticed that the symbols in the other image aren't properly lining up.. Is there a way to fix this?

I see it worked here. Try checking on real mobile.

Hmm weird... I did look from my phone initially, then grabbed the matching images from the mobile preview.

On 6/6/2021 at 7:54 AM, realfoodginger said:

Hmm weird... I did look from my phone initially, then grabbed the matching images from the mobile preview.

Can you take screenshot on your mobile? and which mobile/browser do you use?

All these were taken from Chrome browser on my Samsung. Shows the same on my Samsung browser. 

On 6/6/2021 at 7:54 AM, realfoodginger said:

Hmm weird... I did look from my phone initially, then grabbed the matching images from the mobile preview.

Try new code

/* mobile image text order */
@media screen and (max-width:640px) {
/* start here */
div#page-5b339b1df950b7fadb98d170>.row:nth-child(2) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

7 hours ago, tuanphan said:

Try new code

/* mobile image text order */
@media screen and (max-width:640px) {
/* start here */
div#page-5b339b1df950b7fadb98d170>.row:nth-child(2) {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: reverse;
        -ms-flex-direction: column-reverse;
            flex-direction: column-reverse;
}
}

 

Unfortunately that didn't work either. 

Use new code

/* start here */
div#page-5b339b1df950b7fadb98d170>.row:nth-child(2) {
    display: flex !important;
   flex-direction: column !important;
}
}