Move the shop now button down on mobile - Dawn Theme

[Katielabernathy]

Hi, I would like to move the "Shop Now" button to the bottom of my mobile banner.Does anyone know how to do this? 

[Spac-es]

If you apply the option: 'Show container on mobile' The button will be placed below the image.

This option is within the 'Mobile Design' section by selecting the banner from the Shopify customize panel.

[Katielabernathy]

It did move it down. I'd like it to be on the graphic under "Christmas Collection". Is that possible?

[rochelin_]

do you have some basic css skills?

[Spac-es]

Can be done! It took me a little while to find a solution.

Look for a file called: section-image-banner.css and add the following code to the end of the document:

@media screen and (max-width: 749px) {
  .banner__buttons {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 45rem;
    word-break: break-word;
  }
}

 I hope it helped you!

[Spac-es]

In case you don't know how to access it, simply follow these steps :
1. Online Store > 2. Themes > 3. Three points about the current theme > 4. Use the search engine to find the file > 5. Add the above code.

[aliamak]

It worked great, thank you!  but instead of editing from the code editor, I added your code in the css section on the theme editor. with a small edit:

@media screen and (max-width: 749px) {
  .banner__box {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    flex-wrap: wrap;
    gap: 1rem;
    max-width: 45rem;
    word-break: break-word;
  }
}

[rochelin_]

it's possible to do this by modifying the css a little.

[Katielabernathy]

Okay! do you have a code? I apologize, I don't know anything about css or coding a website.

[rochelin_]

okay, to get the code I need to inspect the element before adding the css. if it's too complicated for you, I can make the changes directly in your shop if you let me.