Move text to the bottom of the banner image and change button shape (turbo theme)

[micaiahwebb]

Hi! I’d like to move the text on my website banner to the bottom of the page and change the button to a rectangle instead of an oval. Ideas?

the-atheneum.com

[made4Uo]

Hi @micaiahwebb

Please follow the instructions below to obtain the changes you wanted

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Asset folder and open the styles.css file
3. At very end of the code, add the code below

.banner.homepage-slideshow .caption.position-center.js-caption {
    height: 100%;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.banner.homepage-slideshow  a.global-button.global-button--primary.first_button {
    border-radius: 0px !important;
}

Result here:

[micaiahwebb]

Unfortunately that didn’t work for me! Thank you tho.

[rishi1897]

.caption {

bottom: 0 !important;

}

[made4Uo]

Hi @micaiahwebb

You styles.css file is corrupted actually. You can do the following instead

1. From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
2. Go to Layout folder and open the theme.liquid file
3. Find the line code <body…, then place the code below in the next line.

See image for placement

[rishi1897]

.caption {
     bottom: -10% !important;
}

[micaiahwebb]

This worked - thank you!