How do I use two different images to optimize banner size between desktop and mobile? I have two images that I want to use - One for desktop (1200 x 400) and one for mobile (450 x 588).
I’m using the dawn theme - https://themcneillbrand.com/
1 Like
Hello,
It is possible think after some coding on your store. If you have basic knowledge of coding then you can also implement this think.
are you have the basic knowledge of coding?
if you don’t have knowledge of coding then you need to a developer.
I have a basic knowledge of coding but I’m not too familiar with Shopify coding language. If you can provide the necessary coding and indicate exactly where to insert the code, I should be able to make it work.
Try to understand, if this could be done with a basic coding, then we would have given you the code by now, but to include a slider in the section here, which will require a lot of coding, not just shopify’s code, but here also knowledge of JavaScript will be required. That’s why you will need a developer.
If you want to get this work done by us then you can contact us by mail
I don’t want to include a slider. When I add a second image, they show up side by side in the banner. I want to have one image for desktop and a separate image for mobile.
you want to display only single image on product page?
Yes, that’s correct.
ok wait a movement we will send the code.
No, I want to add a banner image that’s optimized for mobile viewing (450 x 588). I want to keep the banner image that I currently have for desktop (1200px x 400px) and add another image that only shows on a mobile device with dimensions of 450px x 588 px.
oh, then you will need to developer. and If you want to done this think your self then Please add a tag below the present
tag in the banner section then give the additional class of each
one for the desktop and another for the mobile device (like -
and
) after that apply some css code with media query ‘desktop’ display:block; above min-width:768px when ‘mobile’ display:none; and ‘mobile’ display:block; below max-width:767px when ‘desktop’ display:none;
You can done with follow this way.
and having any problem to do this you can directly contact us. we will help you for do it this think.
Thankyou
Hi @TheMcNeillBrand ,
My understanding is you want have a different image for mobile. My simple solution to this is to create another section and assign this section to mobile or desktop. To do so, you can follow the instructions in the video below.
