Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0
Gamer1

How do I center text on Promotional Pop-Up

Question

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

Share this post


Link to post

10 answers to this question

Recommended Posts

  • 0

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

Share this post


Link to post
  • 0
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.


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

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. 

 

Capture.JPG

Share this post


Link to post
  • 0
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


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0
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%;
}

 


You can send your question to my email to get faster answer.

How to Setup Password & Share URL  Squarespace Customer Care

Share this post


Link to post
  • 0

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.

 

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...