Banner Button Position Question - Keep Aligned on Resize

[mags_marie]

Hi, 

I am using the Dawn theme on my website (link). I added a "Shop Collections" button to the banner image and figured out how to reposition the button. But the problem is that the button doesn't adjust when the screen or browser size is changed. I need the button to automatically adjust so that it stays in the same place below the text. Nothing I have tried has worked. I'm hoping someone can offer a solution for this. Thanks so much! 

M

[patrick521]

---

@mags_marieaarpmahjongg wrote:

Hi, 

I am using the Dawn theme on my website (link). I added a "Shop Collections" button to the banner image and figured out how to reposition the button. But the problem is that the button doesn't adjust when the screen or browser size is changed. I need the button to automatically adjust so that it stays in the same place below the text. Nothing I have tried has worked. I'm hoping someone can offer a solution for this. Thanks so much! 

M

---

Hello, @mags_marie 

To ensure that the “Shop Collections” button on your Dawn theme banner image remains in the correct position relative to the text across different screen sizes, you’ll need to use responsive CSS positioning. This typically involves using media queries to adjust the position of the button based on the screen size.

Here’s a general example of how you might use CSS to keep the button below the text and adjust its position responsively:

/* Default position for mobile and small screens */
.banner__button {
position: absolute;
bottom: 20px; /* Adjust as needed */
left: 50%;
transform: translateX(-50%);
}

/* Adjust position for larger screens */
@media (min-width: 750px) {
.banner__button {
bottom: 40px; /* Adjust as needed */
left: calc(50% + 100px); /* Adjust based on your layout */
}
}

You can add this CSS to your theme’s stylesheet or within a <style> tag in the theme.liquid file. Make sure to replace .banner__button with the actual class or ID of your button, and adjust the bottom and left values to fit your specific design.

I hope it's helpful for you.

Best Regard,
patrick521

[Made4uo-Ribe]

Hi @mags_marie 

Because you use the position:absolute. So the position wont be steady on lower screen. 

Check this one I used the default from the theme. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.banner--desktop-transparent .banner__box {
        position: unset;
        top: 0;
        right: 0;
    }
.banner__content.banner__content--top-left {
        align-items: flex-end !important;
}
.banner__box.content-container {
        padding-bottom: 0px;
}
.banner__content.banner__content--top-left.page-width {
        max-width: 100%;
}
@media only screen and (max-width: 1550px){
.banner__content.banner__content--top-left {
        padding-bottom: 20px;
        padding-left: 30px;
}
        }

And Save. 

Note; I take out this code. 

If it wont listen would you mind to remove this code. Thanks!

Result:

1800px screen View.

1080px screen view. 

It will always stay there. I just adjust the paddings so it wont cover the text. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!