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?
Topic summary
A user seeks help moving banner text to the bottom of the image and changing the button from oval to rectangular shape on their Shopify store using the Turbo theme.
Initial Solution Attempt:
- Another user provides CSS code to add to the
styles.cssfile - Code targets
.banner.homepage-slideshow .captionpositioning and button border-radius - This solution does not work for the original poster
Root Cause Identified:
- The
styles.cssfile is corrupted
Alternative Solution:
- Instructions provided to edit the
theme.liquidfile in the Layout folder instead - Add CSS code after the
<bodytag line - Use
.caption { bottom: -10%; !important; }to reposition text
Resolution:
- The alternative approach successfully resolves the issue
- User confirms the solution worked
2 Likes
Hi @micaiahwebb
Please follow the instructions below to obtain the changes you wanted
- From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
- Go to Asset folder and open the styles.css file
- 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:
Unfortunately that didn’t work for me! Thank you tho.
.caption {
bottom: 0 !important;
}
Hi @micaiahwebb
You styles.css file is corrupted actually. You can do the following instead
- From you Admin page, go to Online store > Themes > Click the three dots on the theme you want to edit > Edit code
- Go to Layout folder and open the theme.liquid file
- Find the line code <body…, then place the code below in the next line.
See image for placement
.caption {
bottom: -10% !important;
}
This worked - thank you!