Banner Button Position Question - Keep Aligned on Resize

mags_marie
Visitor
2 0 2

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
Screenshot 2024-05-08 at 6.41.06 AM.png
Screenshot 2024-05-08 at 6.41.23 AM.png

Replies 2 (2)

patrick521
Visitor
1 0 0

@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
Screenshot 2024-05-08 at 6.41.06 AM.png
Screenshot 2024-05-08 at 6.41.23 AM.png


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
Shopify Partner
5930 1426 1756

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. 

Made4uoRibe_0-1715170786063.png

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

Result:

Made4uoRibe_1-1715170860555.png

1800px screen View.

Made4uoRibe_2-1715170936670.png

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!

Please don't forget to 

Like

 and 

Mark Solution 

to the post that helped you. Thanks!
Sip, savor, and support – your

Coffee Tip

 helps us keep coding magic.❤️❤️❤️
For FREE, premium codes, and trusted, knowledgeable Shopify developers, visit us at

Made4uo.com