Solved

Why isn't my CSS code working on mobile?

xTitanxxx
Visitor
3 0 0

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 

 




Accepted Solution (1)

DevBijan
Shopify Partner
53 2 17

This is an 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.

View solution in original post

Replies 2 (2)

DevBijan
Shopify Partner
53 2 17

This is an 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
Visitor
3 0 0

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!