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

Store Design
1

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:

 
  
    {% section 'footer' %} 
   
  
  
    - {{ 'general.accessibility.refresh_page' | t }}

    - {{ 'general.accessibility.selection_help' | t }}
  

{% include 'magisto' %}

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 !

2

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;
}
3

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 !

4

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;
	}
}