How to change button position only on a particular section only on mobile for shopify dawn theme

Technical Q&A
, , ,

Topic summary

A Shopify Dawn theme user needed help repositioning a button on mobile devices and increasing its opacity. The issue was specific to one section—moving the button from top-center to bottom-center on mobile while keeping desktop layout unchanged.

Initial Solutions Attempted:

  • First suggestion involved modifying base/component- with media queries targeting the section ID
  • Second approach recommended editing section-image-banner.css with custom CSS, but this caused the banner to disappear entirely

Working Solution:
The issue was resolved by adding targeted CSS to base.css:

  • Used section-specific ID (#shopify-section-template--24777996697888__image_banner_YMRDMY)
  • Adjusted min-height property to reposition button on mobile
  • Set opacity: 1 !important to make button fully visible
  • Applied only within mobile media query (max-width: 749px)

The user confirmed this final solution worked successfully for both repositioning and opacity concerns.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi all!

I have two questions.

  1. I want to change the button position from top center to bottom center only on the mobile version (check photo attached). On desktop the button is exactly where it needs to be. It is only for that section, I am worried that other buttons might end up getting changed too.

IMG_5198.PNG
IMG_5198.PNG500×1084 2.58 MB

  1. For both desktop and mobile, the opacity of the button is very light. I want to be able to actully see it too. is there a way to do that?

Here is the preview of my WIP website -

Preview

1 Like
2

Hi @amaya_world ,

Please use the following code in base/component-

@media only screen and (max-width: 749px) {
/* Replace with your section ID or class /
#shopify-section-featured-product .button {
position: relative; / or absolute/fixed, depending on the layout /
top: 20px; / Adjust these values as needed /
left: 10px;
/ Example: center it */
margin: 0 auto;
display: block;
}
}

Thanks

3

Thanks so much for this, I am a total newbe with coading, could you exlain to me what is ‘/* Replace with your section ID or class */’ and where can I find it? also is base/component- same as base.css? do I need to post it in the end of that file?

4

Hello @amaya_world

Go to online store ----> themes ----> actions ----> edit code ----> assets ----> section-image-banner.css
add this code at the end of the file and save.

@media screen and (max-width: 749px) {
.banner--small:not(.banner--mobile-bottom):not(.banner--adapt) .banner__content {
min-height: 100rem !important;
}
}

result

40.png
40.png356×520 319 KB

If this was helpful, hit the like button and accept the solution.
Thanks

5

Hi Rahul! thanks so much for looking into my issue, the banner unfortunatey disappeared all together. What can I do about it? Also if there is a way to increase opacity, that would be amazing!

6

@amaya_world please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media screen and (max-width: 749px) {
#shopify-section-template--24777996697888__image_banner_YMRDMY .banner__content {min-height: 65rem !important;}
#shopify-section-template--24777996697888__image_banner_YMRDMY .banner__buttons .button{opacity: 1 !important;}
}
1 Like
7

This worked! Thanks a ton!