How can I adjust image size for desktop view only in the Dawn theme?

MarkoGostic
Excursionist
15 0 2

Hello. I hope you are well. 

 

How can I reduce one image from the "image with text" section for desktop only? 

 

So when I put full width, the image is great on mobile but too big for a desktop. 

 

I find that if I put "medium" size, the image is excellent for desktops but too small for mobile phones. 

 

I tried to code, but it didn't work. If someone can help me, I will be grateful. I use the Dawn theme. 

 

I will put my link here. When you go to my Shop, click on some products and scroll down. 

 

My Shop: https://trendshoppingstores.com/ 

 

And then, you will find,,Compare Table". That table I want to reduce. 

 

Thank you very much, and have a nice day.

Maki
Replies 6 (6)

Ahsan_ANC
Shopify Partner
1392 253 323

Hi,

You can try this code

your current settings show full width on mobile, which you want. here is the code to reduce the width on desktop. you can increase/decrease value 20 in the code to your choice.
1. Go to Online Store-> Theme->Edit code
2. Asset-> base.css ->paste the below code at the bottom of the file.

 

@media screen and (min-width: 751px){
#Slide-template--16544529416408__1662056471c2f53b25-1 .background-none .multicolumn-card__image-wrapper {
    margin: 0 26%;
}
}
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
MarkoGostic
Excursionist
15 0 2

Thank you for your response.

 

Unfortunately, the Compare Table image didn't resize.

 

I did everything you said, but it didn't work.

 

So the Image with text section didn't reduce for the desktop.

 

 

Maki
Ahsan_ANC
Shopify Partner
1392 253 323

please use this code

 

#Slide-template--16544529416408__1662056471c2f53b25-1  .multicolumn-card__image-wrapper {
    margin: 0 26% !important;
}
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
MarkoGostic
Excursionist
15 0 2

Hey Ahsan. This is good code.

 

But I want to reduce the image only on the desktop.

 

I don't want to reduce the image on my mobile phone.

 

Can you customize the code for the desktop only?

 

Thank you so much, and have a nice day.

Maki
Ahsan_ANC
Shopify Partner
1392 253 323

please replace above code with this one

 

@media only screen and (min-width: 768px){
  #Slide-template--16544529416408__1662056471c2f53b25-1  .multicolumn-card__image-wrapper {
    margin: 0 26% !important;
}
}
Contact for any custom design? Skype : ahsananc
>Was your question answered? Mark it as an Accepted Solution!
Feel Free to Contact Me at my Email: anc2277@gmail.com


To enhance and customize Shopify search and filter, I use Boost Product Filter & Search
MarkoGostic
Excursionist
15 0 2

Hey Ahsan. I checked again, and this code only works for one "Dog Ramp" product.

 

So I have 18 products in the shop. How can I make it work for every product? Thank you.

Maki