Make Shop Now Button Smaller On Home Page - Mobile Only

[amyp25]

On mobile my Shop Now button is huge and hard to see where it is placed, but looks perfect on desktop and pads.  How can I adjust mobile size/placement only?  The site is live at www.theblacksheepfam.com and this is the Dawn theme. Thanks in advance!

Mobile

Pad / Desktop

[Sinchain · Accepted solution]

Hey @amyp25 

Thank you for reaching out to the Shopify community.

Here are the steps for your reference:

1. Navigate to the theme editor Online Store -> Themes -> Edit Code.

2. Search for the asset named as search-image-banner.css, open the file and add the below code at the end of the file:

@media screen and (max-width: 749px) {
  .banner__buttons{
    top: 98px;
  }
  .banner:not(.banner--mobile-bottom) .button--secondary {
    border: 1px solid #000;
    padding: 7px 10px;
    min-height: unset;
    color: #000;
    line-height: unset;
    background: #fff;
  }
}

Save the changes and please have a check once. Let me know if this was helpful.

Thanks.

[Sinchain · Accepted solution]

Hey @amyp25 

Thank you for reaching out to the Shopify community.

Here are the steps for your reference:

1. Navigate to the theme editor Online Store -> Themes -> Edit Code.

2. Search for the asset named as search-image-banner.css, open the file and add the below code at the end of the file:

@media screen and (max-width: 749px) {
  .banner__buttons{
    top: 98px;
  }
  .banner:not(.banner--mobile-bottom) .button--secondary {
    border: 1px solid #000;
    padding: 7px 10px;
    min-height: unset;
    color: #000;
    line-height: unset;
    background: #fff;
  }
}

Save the changes and please have a check once. Let me know if this was helpful.

Thanks.

[amyp25 · Accepted solution]

That worked very nicely, thanks so much!