Banner Button

Store Design
1

Is it possible to move my banner button up closer to the text “advocate”.

I also want the box length to match the text.

url:ausomeapparelco.com

IMG_2718.jpeg
IMG_2718.jpeg1277×2178 223 KB

2

Hi @bnbrown88

You can do that by adding this code to Custom CSS in Online Store > Themes > Customize > Theme settings

@media (max-width: 749px) {
    .banner .banner__buttons a.button.button--primary {
        padding: 0 8px !important;
        min-width: max-content !important;
    }
    .banner__buttons { margin-top: .4rem !important; }
}

Screenshot 2024-11-07 at 08.40.37.png
Screenshot 2024-11-07 at 08.40.37.png882×1118 140 KB

3

Hi @bnbrown88 ,

Please go to Actions > Edit code > Assets > base.css file and paste this at the bottom of the file:

@media only screen and (max-width: 749px) {
    .banner__box>*+.banner__buttons {
       margin-top: 1rem !important;
    } 
    .banner__box.content-container a.button.button--primary {
        width: 100px;
        min-width: auto;
    }
}
4

Hi @bnbrown88 ,

Thanks for your questions, to move the button closer to text, you can follow the instruction here:

  1. Go to Shopify > Theme > Edit code > Custom CSS.

  2. Copy and paste this code to the box.

.banner__box>*+.banner__buttons a {
    padding: 0 !important;
    min-width: unset !important;
    width: 145px !important;
    position: absolute;
    top: 0;
}
@media only screen and (max-width: 550px) {
    .banner__box>*+.banner__buttons a {
        top: -25px;
        width: 90px !important;
    }
}
@media only screen and (max-width: 749px) {
    .banner__box>*+.banner__buttons a {
        width: 120px !important;
    }
}
5

Thank you.

IS there a code to make the button and text bigger on desktop view and keep this same size on mobile view?

6

Plesae update the code

.banner .banner__buttons a.button.button--primary {
        padding: 0px 8px !important;
        min-width: max-content !important;
        
}
.banner__buttons { margin-top: .4rem !important; }
@media (min-width: 750px) {
    html .banner .banner__buttons a.button.button--primary {
        padding: 8px 12px!important;
        font-size: 24px;
    }
}
7

Do I remove the previous or add the new code under the initial code?

8

Yes, please replace previous code with new ones