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

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

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

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

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

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

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