A user seeks to reposition a button on a Dawn theme banner image from center to bottom-right. They’ve attempted using .banner__buttons in CSS without success.
Two solutions were provided:
Global theme.liquid modification - Add CSS targeting .banner__box.content-container with absolute positioning (bottom: 8%, right: 10%) above the </head> tag
Section-specific Custom CSS - Apply flexbox properties to .banner__content (align-items and justify-content set to flex-end) plus remove bottom padding from .banner__box
The second solution includes a screenshot demonstrating the result and targets only the specific Image banner section rather than affecting the entire theme. Both approaches use CSS positioning/flexbox rather than modifying Liquid template files directly.
Status: Multiple solutions offered, awaiting user confirmation of which approach worked.
Hi everyone,
I’m using the Dawn theme, and I need help adjusting the button position on my banner image. Right now, the button is centered, but I’d like to move it to the bottom right, as shown in the attached image.
I know I should use .banner__buttons in CSS, but it’s not working as expected. I’ve tried different approaches, but I can’t get the button to move to the correct position.
Does anyone know how to fix this? Any help would be greatly appreciated!
Thanks in advance!
Hi @Vilcka , Can you share your store url with us?
Url: voir.cl
pass: pedobear
many thanks!
Hi @Vilcka , I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code
2/ Search for “theme.liquid” file
3/ Open the file and search for tag and add the following code above tag
Here is the code for Step 3:
{% style %}
.banner__box.content-container {
padding: 0 !important;
position: absolute;
bottom: 8%;
right: 10%;
}
{% endstyle %}
if this helpful, please give us a like, and mark its a solution. Thanks you.
Hi @Vilcka
Please add this code to Custom CSS of that Image banner section
.banner__content {
align-items: flex-end;
justify-content: flex-end;
}
.banner__box {
padding-bottom: 0;
}
