How to set different CSS styles and HTML dimensions for images in desktop and mobile web-DEBUT THEME

Highlighted
New Member
3 0 0

Good day,

I'am just starting out with shopify and want learn to code a bit.

Footer Payment images in Debut theme are to small for me so i decided to put bigger ones. Everything was fine i've putted them, but they appeared in the bottom left corner so again problem , but i solved it too, after that i noticed that my code was correct only for desktop web and on mobile web images was not in that place where i want them to be. So i tried to seperate images(HTML) and styles(CSS) and now i ran into the wall. 

So the question is : How to set my payment images for mobile and desktop with different dimensions (HTML) and different positioning (CSS) ?

website : protectscreen.net

code: 

 

  /*  .methods-of-payment{ 
    position: absolute !important;
    left: 250px !important;
    bottom: 55px !important;
      }
      
      .methods-of-payment-mobile{
        position: absolute !important;
        left: 250px !important;
        bottom: 55px !important;
      }
      
@media (max-width:992px){
.methods-of-payment-mobile {
  display: inline !important;
}
.methods-of-payment{
display: none !important;
}
}  
      */
</style>
  
    {% section 'footer' %} 
   <!-- <span class="methods-of-payment-mobile"> 
  <img src="{{ 'american_express' | payment_type_img_url }}" height="40" alt="american express" />
  <img src="{{ 'master' | payment_type_img_url }}" height="40" alt="master" />
  <img src="{{ 'paypal' | payment_type_img_url }}" height="40" alt="paypal" />
  <img src="{{ 'visa' | payment_type_img_url }}" height="40" alt="visa" /> --!
      
    <span class="methods-of-payment">
  <img src="{{ 'american_express' | payment_type_img_url }}" height="50" alt="american express" />
  <img src="{{ 'master' | payment_type_img_url }}" height="50" alt="master" />
  <img src="{{ 'paypal' | payment_type_img_url }}" height="50" alt="paypal" />
  <img src="{{ 'visa' | payment_type_img_url }}" height="50" alt="visa" />
</span> -->
  </div>
  <ul hidden>
    <li id="a11y-refresh-page-message">{{ 'general.accessibility.refresh_page' | t }}</li>
    <li id="a11y-selection-message">{{ 'general.accessibility.selection_help' | t }}</li>
  </ul>
{% include 'magisto' %}
  
</body>
</html>

 

 

I have written a code to theme.liquid but it's not working out for me. ( I have basics in HTML and CSS, but don't know anything about Liquid and how it works with shopify).

Would be great to solve and to understand what i did wrong. 

Sorry for my English.

Thanks ! 

0 Likes