Jump to content

Hide ConvertKit Pop up box on specific pages

Recommended Posts

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.

Link to comment
  • Replies 12
  • Views 1.5k
  • Created
  • Last Reply
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

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?

 

image.png.868b4c927cdea9e96539221c43630026.pngimage.png.3c61d334e0e93c81f4313973642b0ee2.pngimage.png.1e7dce74271f54454bb59e7a1e6408bf.png

Link to comment
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?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
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. 

Screenshot_20210608-190417_Chrome.jpg

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.