Move Button on Image With Text Overlay Debut Theme

Store Design
1

I am working on the debut theme, and I am making use of the image with text overlay to make a banner on the front page. However the button that gets added is in the way of the image. I’ve followed other threads covering this same question but adding the following code to the theme.css doesn’t seem to move the button at all.

.hero__inner {
    vertical-align: bottom !important;
    padding: 10px 0 !important;
}

How would I go about moving the button from the center to the bottom?

here’s a screenshot of the button placement.

Untitled-8.png
Untitled-8.png1200×350 247 KB

1 Like
2

Could you link your site?

3

The debut theme isn’t my currently active theme, is currently designing it as a preview.

4

margin-top:50px; or so doesn’t work?

5

Oh I found the theme online, you can use the below:

.hero__inner a.btn.hero__btn {
    margin-top: 100px;
}

Or if that fails and you want to use absolute + percentages you can use this and adjust the top as necessary:

.hero__inner a.btn.hero__btn {
    top: 80%;
    left: 50%;
    transform: translateX(-50%);
    position: absolute;
}
2 Likes
6

The 2nd solution was exactly what I needed! Thanks!

7

This was so helpful! Thank you!