Change position and size of button

zedbottle
New Member
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

0 Likes
HardikDavra
Shopify Partner
1886 299 817

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  */
}
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
zedbottle
New Member
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.

0 Likes
HardikDavra
Shopify Partner
1886 299 817
.hero__text-wrapper {
margin-left: 5px; /* try this by changing this number */
}
Want to customize Shopify storefront? Check the PageFly app
75,000+ Active Shopify merchants. TOP5 best Shopify Apps.

Contact Me On : parambabla.soft@gmail.com
0 Likes
zedbottle
New Member
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.

0 Likes
LitExtension
Shopify Partner
675 68 119

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
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
0 Likes