How do I center text on Promotional Pop-Up

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;
} 

You mean text in yellow bar?

or Did you disable promotion popup? I don't see..

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

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.

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. 

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

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

Insert the code & let me know. I will check again.

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

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%;
}

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.

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

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

11 minutes ago, tuanphan said:

What is your site url? We can check easier

I will message you privately

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;
}

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):

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. 

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):

 

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.

Hello Tuanphan, 

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

Thanks, 
 

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;
}

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!

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!

 

Add this code under

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

Hello Tuanphan, 

This looks great, thank you very very much.