Jump to content

Move Cookie Banner buttons below text and centered

Recommended Posts

Hi, I'm trying to move the position of the buttons in the Cookie Banner to below the text and centred within the banner. Please see the attached image to see what I mean. 

I've managed to make some edits to the banner with the below code but I don't know CSS well enough to achieve my goal

Your help would be greatly appreciated.

If there's a way to blur the background slightly until a button is pressed then this would be extra appreciated! 

Many thanks,

Nick



.sqs-cookie-banner-v2 p, .sqs-cookie-banner-v2 a {
 color: #eb6521 !important;
}
.sqs-cookie-banner-v2-accept {
font-size: 16px !important;
color: #eb6521 !important;
}
.sqs-cookie-banner-v2 {
  height: 200px;
}
.sqs-cookie-banner-v2 p, .sqs-cookie-banner-v2 a {
  font-size: 14px;
}

image.thumb.png.1a79ebc7cee24fce8b19e6b0043e7f85.png

Edited by NP3000
Link to comment
  • Replies 4
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Hi @NP3000, can you share your website URL?

I can see that you've made some edits, can you describe what you're missing? Maybe button sizing even? Red button border? On both? Are you wanting the whole website to be blurred until a button is clicked?

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

Link to comment

Hey Ziggy, thanks for your quick response. 

The website is www.sessionstudio.com

I just want to centralise the text and buttons within the banner. And yes, if the whole site can be blurred slightly until the buttons are selected. Or, if the banner could float in front of the whole site until a button is selected then that would be great. 

Many thanks,

Nick

Edited by NP3000
Link to comment

I think if you want a more sophisticated cookie banner with an overlay effect you might need to find a plugin you can install. 

Centering the items you would need to add this CSS:

@media screen and  (min-width: 640px) {
.sqs-cookie-banner-v2.BAR {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
 }
}

 

Please like and upvote if my comments were useful to you. Thanks!

Zygmunt Spray
Squarespace Website Designer
Contact me: https://squarefortytwo.com/ 
🔌Ghost Squarespace Plugins (Referral link)
Buy me a coffee

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.