Jump to content

Button spacing fix on newsletter section

Go to solution Solved by beyond_electro,

Recommended Posts

I want to get all button spacing styles the same on the site.

The height seems a lot more on the newsletter. The 'logo + book your call' screenshot attached shows the button style I want the newsletter 'Sign me up" button to be.

The button in "style" = "bright" using the primary button (which I am using throughout the site without spacing issues).
I have tried in styles but I think all my buttons in site use 'primary' - this newsletter button is just behaving/appearing differently.

Thank you kindly in advance.

Screenshot 2024-08-21 at 12.56.58.png

Screenshot 2024-08-21 at 12.56.43.png

Edited by beyond_electro
Link to comment
  • Replies 5
  • Views 232
  • Created
  • Last Reply

Top Posters In This Topic

Top Posters In This Topic

Posted Images

Also,  the code I have that works for all my other buttons changing to gold on hover and colouring in the border with gold isn't working for this 'newsletter' button as pictured.

//Change button hover & border colours//
.sqs-block-button-element:hover {background-color: #876B0B!important;
border: 1px solid #876B0B;
 color: #fff !important;}

.sqs-button-element--primary:hover {background-color: #876B0B!important;
border: 1px solid #876B0B;
 color: #fff !important;}

.sqs-button-element--secondary:hover {background-color: #876B0B!important;
border: 1px solid #876B0B;
 color: #fff !important;}

.sqs-button-element--tertiary:hover {background-color: #876B0B!important;
border: 1px solid #876B0B;
 color: #fff !important;}

Thank you kindly in advance

IMG_9861.PNG

Link to comment

I have tried this for the button hover but it is not working...

//Change testimonial button hover border to gold//
section[data-section-id="66ba162c83a676735b68e0d5"] .sqs-block-button-element:hover 
{background-color: #876B0B !important;
border: 1px solid #876B0B !important;
 color: #fff !important;}

Link to comment

I have fixed the newsletter button hover colour with this:

//newsletter button hover colour//
@media (max-width: 767px) {  
    .primary-button-style-outline .fluid-engine .newsletter-form .newsletter-form-body .newsletter-form-button:hover {
        border: #876B0B!important;}
}

I am still looking for a fix for the button spacing as seen in initial post of this request.

Is there anyone out there who can help with this?

Thank you so much

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.