Two buttons specific reposition

Topic summary

A user seeks help with two CSS customization issues on their Shopify store:

Issue 1: Extra spacing removal

  • Successfully resolved using CSS code targeting the first slider slide’s margin and scroll-margin properties

Issue 2: Button repositioning and styling

  • Goal: Center two buttons within boxes, make them transparent with white text and white outline
  • Initial code provided didn’t work for button repositioning
  • Solution refined with updated CSS targeting the banner buttons container, using flexbox properties (inline-flex, gap, justify-content)
  • Code includes media query for screens min-width 769px

Implementation:

  • CSS code added to theme files (base.css/theme.css/style.css/main.css/custom.css) at the end of the file
  • Screenshots were shared showing the specific areas needing adjustment

Resolution: Both issues successfully resolved after the second iteration of CSS code. The discussion is marked as solved.

Summarized with AI on October 27. AI used: claude-sonnet-4-5-20250929.

Hi all!

I need some help with my website.

Website link : https://nothingchanges.com.my/

  1. How to remove this extra spacing here. Refer image below

  1. How to make the 2 buttons in the middle in each boxes and make the button transparent with white text and white outline? by using custom css code.

Thanks in advance!

Hey! @nothingchanges ,

Go to Online Store, then Theme, and select Edit Code.
Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

@media screen and (min-width: 7690px) {
    .slider--desktop .slider__slide:first-child {
        margin-left: 0px !important;
        scroll-margin-left: 0px !important;
    }

div#Banner-template--24573836820843__image_banner_nWqxB7 .banner__buttons {
    display: inline-flex;
    gap: 59rem !important;
    max-width: 100% !important;
    justify-content: space-evenly !important;
}
}

Thank you! Everything worked except for the button reposition. Could you assists me by providing a CUSTOM CSS code instead?

Try this code @nothingchanges

@media screen and (min-width: 769px) {
    .slider--desktop .slider__slide:first-child {
        margin-left: 0px !important;
        scroll-margin-left: 0px !important;
    }
    div#Banner-template--24573836820843__image_banner_nWqxB7 .banner__buttons {
    display: inline-flex;
    flex-wrap: nowrap !important;
    gap: 55rem !important;
    max-width: 100% !important;
    word-break: break-word;
}
}
1 Like

which line should i paste it?

Search for base.css/theme.css/style.css/main.css/custom.css file Add the provided code at the end of the file.

1 Like

YOU ARE AMAZING! THANK YOU SO MUCH!

1 Like