How to set images for mobile and desktop with different dimensions and positioning? / DEBUT THEME

Solved
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 in the bottom left corner so problem again, but i solved it too, after that i noticed that my code was correct only for desktop web on mobile web images was not in that place where i wanted them to be. I tried to seperate codes for mobile and desktop images and ran into the wall. 

So the Question is: How to set my payment images for mobile and desktop webs with different dimensions and different positioning?

website: protectscreen.net

code:

 

   <style> /*
      .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 only screen and (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 worked 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 understand what i did wrong.

Sorry for my English.

Thanks ! 

0 Likes
Highlighted
Trailblazer
304 73 85

Hi @ProtectScreen 


Please tell me where you want to change your position
1. Go to Online Store->Themes->Edit code
2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.

.payment-icons .icon {
    width: 55px;
    height: 40px;
}

 

If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
Highlighted
New Member
3 0 0

Hello, @Vikas_Chovatiya.

Thanks for your reply

Your suggestion is working, but for both pages.

Position is actually fine right know, but i want to make icons on mobile a bit smaller then on desktop web. Is that possible? 

Thanks ! 

 

0 Likes
Highlighted
Trailblazer
304 73 85

This is an accepted solution.

Hi @ProtectScreen 

Please paste below code 

.payment-icons .icon {
    width: 55px;
    height: 40px;
}
@media screen and (max-width: 749px){
	.payment-icons .icon {
	    width: 45px;
	    height: 35px;
	}
}
If helpful then please Like and Accept Solution.
-Want to modify or custom changes on store Hire me.
- Feel free to contact me on vikaschovatiya02@gmail.com regarding any help
If you are happy and want to donate small Click here (Its my paypal)
0 Likes