Jump to content

I can't figure out how to add a margin/gap between two buttons

Recommended Posts

Hello,

I'm having a hard time trying to figure out how to customize the gap/margin between two buttons. One button is a primary button block. The other is for a pop-up form/lightbox.  It looks fine on desktop view and mobile. But on an iPad, the buttons are too close together.

I'm on Squarespace 7.1. Website: https://jcherrod.com

 

//Button//
.sqs-button-element--primary {
        white-space: nowrap !important;
        color: #000 !important;
        background-color: white !important;
        border-radius: 12px;
        border: 2px solid #000 !important;
        padding: 20px !important;
        box-shadow: .9px 1px 0 0 #000, 1.5px 2px 0 0 #000, 2.5px 3px 0 0 #000, 3.5px 4px 0 0 #000, 4.5px 5px 0 0 #000, 5.5px 6px 0 0 #000, 6.5px 7px 0 0 #000, 7.5px 8px 0 0 #000, 8.5px 9px 0 0 #000, 9.5px 10px 0 0 #000;
        display: inline-block;
        position: relative;
        cursor: pointer;
        transform: rotateX(0), rotateY(0) rotateZ(0);
        inset: 0;
        outline: 2px dashed transparent;
        transition: all 600ms ease;
    }

.sqs-button-element--primary:hover {
        color: white !important;
        background-color: #0fa5f4 !important;
        inset: 6px 0 5.5px 0;
        transform: rotateX(5deg) rotateY(3deg) rotateZ(.25deg);
        box-shadow: none;
        border: 2px solid #000 !important;
    }

 

Screenshot 2024-04-07 at 5.49.13 PM.png

Screenshot 2024-04-07 at 5.49.29 PM.png

Edited by JCH09
Link to comment

If you still can't fix this, you can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:1024px) and (min-width:768px) {
.fe-block-yui_3_17_2_1_1712597396422_47239 {
    grid-column-start: 17 !important;
    grid-column-end: 20 !important;
}
}

 

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
Posted (edited)
On 4/7/2024 at 6:26 PM, designbyency said:

Maybe this is your button size. Have you got the buttons set to Fit or Fill in their settings?

Hi Ency! Thank you for your response.

I have the primary button set to Fit. But the Lightbox form popup button(Get in Touch button), it's not giving me an option. This button also won't allow me to shrink the width anymore either

Screenshot 2024-04-09 at 2.39.09 PM.png

Edited by JCH09
Link to comment
10 hours ago, tuanphan said:

If you still can't fix this, you can use this code to Website > Website Tools > Custom CSS

@media screen and (max-width:1024px) and (min-width:768px) {
.fe-block-yui_3_17_2_1_1712597396422_47239 {
    grid-column-start: 17 !important;
    grid-column-end: 20 !important;
}
}

 

Hi Tuan! Thank you for your response. I tried this option, it was still having issues with the buttons being right on top of each other in a smaller screen

Link to comment
On 4/10/2024 at 1:47 AM, JCH09 said:

Hi Tuan! Thank you for your response. I tried this option, it was still having issues with the buttons being right on top of each other in a smaller screen

This code will run for screen size: 768px to 1024px

If you have problem with other sizes, you can let me size, I can adjust the code

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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

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.