Jump to content

How do I center text on Promotional Pop-Up

Recommended Posts

Site URL: https://www.kingslandkitchen.com

I cant get the text to center on the promotional pop up I am using. 

 

I am using code to remove the X:

.sqs-popup-overlay-close {display: none !important}

To center the text I tried the code below and removed the p as well but its not centering, not sure what I am missing but welcome any advice or fix. 

.sqs-popup-overlay-close p {
  text-align: center;

 

Capture.JPG

Link to comment
  • Replies 21
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

18 hours ago, Gamer1 said:

Hi, I was referring to the text in the yellow bar. The Yellow Bar is a promotional pop up layout option.

Add to Home > Design > Custom CSS

.sqs-slice-body-content p {
    text-align: center;
    width: 100%;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="body"] {
    max-width: 100%;
}

If it doesn't work, keep the code & let me know. I will check again.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
21 hours ago, Gamer1 said:

Hi Tuanphan, 

The code worked partially as it moved the text a little to the right. But not entirely, I left the code on the site as you asked as well. 

Thank you for looking at this, its appreciated. 

.sqs-slice-body-content p {
    text-align: center;
    width: 100%;
    line-height: 1em !important;
}
.sqs-slice-group.group-text {
    flex-basis: 100% !important;
    padding-right: 0 !important;
}
.sqs-slice-group .actions {
    display: none !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="body"] {
    max-width: 100%;
}

remove old code & use this

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Hi Again, 

I tried to code and it center the text on the backend but on the live view the text didnt center. 

I attached a couple screenshots with the code I am using and then the back end view and live site. 

I really appreciate your help on this. 

Cheers Mate

 

1.JPG

2.JPG

3.JPG

Link to comment
On 6/1/2020 at 8:21 AM, Gamer1 said:

I inserted the code and it still showing text to the right on the live site and centered on the back end. 

Hi. Remove above code & add this to Home > Design > Custom CSS

.sqs-slice-body-content p {
    text-align: center;
    width: 100%;
    line-height: 1em !important;
}
.sqs-slice-group.group-text {
    flex-basis: 100% !important;
    padding-right: 0 !important;
}
.sqs-slice-group .actions {
    display: none !important;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="body"] {
    max-width: 100%;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

I tried the code again and I made a video to show you what I am seeing on the backend versus other browsers that I just installed. I show in the video the css I am already using in case its messing up what shows on the front end of the site.  Do you see the text centered on your browser by chance?

I really appreciate your help with this.

 

Link to comment
  • 1 year later...
On 5/27/2020 at 2:56 PM, tuanphan said:

Add to Home > Design > Custom CSS

.sqs-slice-body-content p {
    text-align: center;
    width: 100%;
}
.sqs-slide-wrapper[data-slide-type="popup-overlay"] [data-slice-type="body"] {
    max-width: 100%;
}

If it doesn't work, keep the code & let me know. I will check again.

Hi

 

Thanks for this code, it worked for me !! 

Only problem is that is centred all the text except the title. Is there any code to include centering the title as well?

thanks

Link to comment
Just now, ElizLdn said:

Hi

 

Thanks for this code, it worked for me !! 

Only problem is that is centred all the text except the title. Is there any code to include centering the title as well?

thanks

What is your site url? We can check easier

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
6 hours ago, ElizLdn said:

I will message you privately

Add to Design > Custom CSS

h1#sqs-slash-page-header {
    width: 100% !important;
    text-align: center;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 5 months later...

Hello, thank you in advance. 

I need to move the text on promotional pop-up to the left (so that text is not on top of the image):

image.png.b7b75f73dde1e90bca3b373e50909c17.png

 

Text and email sign up and disclaimer should be aligned further to left to make way of e-Cookbook from going on the hair. 

Additionally, is there anyway to move the disclaimer text to the bottom of the pop-up, under the Creator of For Me Bar? 
 

URL: formebar.com/blog 

TIA. 

Link to comment
9 hours ago, Mary_DG said:

Hello, thank you in advance. 

I need to move the text on promotional pop-up to the left (so that text is not on top of the image):

image.png.b7b75f73dde1e90bca3b373e50909c17.png

 

Text and email sign up and disclaimer should be aligned further to left to make way of e-Cookbook from going on the hair. 

Additionally, is there anyway to move the disclaimer text to the bottom of the pop-up, under the Creator of For Me Bar? 
 

URL: formebar.com/blog 

TIA. 

Can you enable popup? It doesn't show on my end.

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
15 hours ago, Mary_DG said:

Hello Tuanphan, 

Sorry I had to disable it for other pages, please check:
https://www.formebar.com/rustic-cinnamon-rolls-vegan

Thanks, 
 

Add to Design > Custom CSS

div.sqs-slice-group.group-copy.copy-layer-background {
    padding-left: 10px !important;
}
.form-disclaimer-text {
    position: absolute;
    bottom: 0px;
}
.actions>div {
    position: static !important;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
4 hours ago, Mary_DG said:

Thank you Tuanphan, it worked. But now how do I aling the recaptcha with the email address field? with a small space between the email address field and recaptcha?

Thank you so much, you are awesome!

 

image.png

Add this code under

div.actions .captcha-container.align-center.rendered>div {
    float: left;
}

 

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

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • 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.