Change position and size of button

zedbottle
Visitor
3 0 0

Hello. I want to change the position and size of the CTA button on my slideshow on the homepage. What is the coding for me to be able to change these? Thanks

URL: www.zedbottle.com

Replies 5 (5)

Hardik29418
Shopify Partner
2845 406 1071

Please place this code at the end of theme.scss

@media screen and (min-width: 769.1px) {
.hero__inner {
    padding-top: 232px; /* Increase or descrease this number to change the position  Vertically*/
}
.hero__text-wrapper {
    padding-left: 38%; /* Increase or descrease this number to change the position Horizontally*/
}
.hero__btn {
    padding: 21px 29px;/* Increase or descrease this number to change the size of button  */
}
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
zedbottle
Visitor
3 0 0

Thankyou!, however I can't seem to move the CTA button to the left even when I try to change the number.

Hardik29418
Shopify Partner
2845 406 1071
.hero__text-wrapper {
margin-left: 5px; /* try this by changing this number */
}

- Need a Shopify developer? Chat on WhatsApp or EMAIL ME!


- Your Coffee Tip would do Magic code ❤️
- For Shopify Design Changes | Shopify Custom Coding | Custom Modifications
- Email
zedbottle
Visitor
3 0 0

It moved slightly to the left, but it won't go any further to the left even when I change the number.

LitExtension
Shopify Partner
4860 1001 1128

Hi @zedbottle

You can try my recommendation. Please place this code at the end of the "theme.scss" file.

.hero__text-wrapper {

    margin-left: 0px;

    display: flex;

    justify-content: flex-start;

    padding: 0 120px;

}

.hero-index .hero-content {

    width: 66.666%;

}

Screenshot to refer: https://prnt.sc/11izmyt

But in this case, I suggest you should upload text info without include in the banner image. Hope to this helps.

LitExtension - Shopping Cart Migration Expert
Check out our Shopify migration app to migrate your online store to Shopify