Why isn't my CSS code working on mobile?

[xTitanxxx]

Hi, thanks for helping! 😁

I coded a 'Download Image' button into my product page that leads to a download link that is determined by a metafield. My issue: 
---> On PC it looks fine, but on mobile it doesn't:  https://imgur.com/a/qTvuwcm

• I'm using the 'Studio' theme.
• HTML code is within the 'buy-buttons.liquid' file. 
• CSS code is within 'base.css' file.

HTML Code :
Creates a class "button download-button", meaning it has all the properties of the button download PLUS any extra properties defined for download-button:

   <!-- Inserted Download Button -->
          {% if product.metafields.custom.download_link %}
           <a href="{{ product.metafields.custom.download_link }}" class="button download-button" download>Download Image</a>
          {% endif %}
           <!-- End of Download Button -->

CSS Code:  
Defines the CSS for class 'button.download-button' as having an extra 10px margin to the bottom and a 100% width for the button.

  }
  .button.download-button {
  margin-bottom: 10px; /* Custom margin */
  width: 100%; /* Make the button full-width */
}

I know my CSS isn't faulty since it achieved exactly what I wanted on PC: created a margin at the bottom and made the button full width.

But on mobile, the CSS seems to have not applied. I say this because it looks exactly like it did on PC before I applied any additional CSS. The margin isn't there, and the button isn't full width.

Any help would be greatly appreciated.
Thanks so much!
Gil 

[DevBijan · Accepted solution]

A few things you could try is adding a media query in your css for mobile devices

@media (max-width: 768px){
/*Mobile Styles Here*/
}

You can also try adding !important to the css.

  .button.download-button {
  margin-bottom: 10px !important; /* Custom margin */
  width: 100% !important; /* Make the button full-width */
}

My best guess is that .button is an already existing class so some mobile styles are being overwritten.

[xTitanxxx]

Thanks so much! You fixed it :_)

Adding the media query worked. I tried that before but I guess I must have coded it wrong.

Very grateful!