FROM CACHE - en_header

Move Button on Image With Text Overlay Debut Theme

Solved
JordanAmaley
Tourist
6 0 2

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

 

Accepted Solution (1)

Accepted Solutions
Helenama
Excursionist
31 5 7

This is an accepted solution.

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;
}

 

View solution in original post

Replies 5 (5)
Helenama
Excursionist
31 5 7

Could you link your site?

JordanAmaley
Tourist
6 0 2
The debut theme isn’t my currently active theme, is currently designing it as a preview.
Helenama
Excursionist
31 5 7

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

Helenama
Excursionist
31 5 7

This is an accepted solution.

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;
}

 

Noahcat
New Member
1 0 0

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