Shopify Not Working For Images

Highlighted
New Member
3 0 0

Hi there I just started to work on my site and the image looks fine on desktop view but on mobile view it looks way too small. Is there any way that I can solve my issue? 

I am using the Venture theme and it doesn't allows me to use different images for Mobile version/ Pc version?? The images i use for pc will automatically be scaled for Mobile.

zxczxc.PNGWhatsApp Image 2020-07-21 at 11.51.07 PM.jpeg

 

0 Likes
Highlighted
Anonymous
Not applicable
1164 0 0

To use multiple types of images for mobile and desktop you can adjust the code to use the picture tag like this (please note that you'll need to update the image url to display the appropriate image):

<picture>
		<source media="(max-width: 999px)"
					  sizes="auto"
					  srcset="{{ 'my_image.jpg' | asset_img_url: '480x' }} 480w" />

		<source media="(min-width: 1000px)"
					  sizes="auto"
					  srcset="{{ 'my_image.jpg' | asset_img_url: '1600x' }} 1600w" />

		<img src="{{ 'my_image.jpg' | asset_img_url: '1000x' }}"
				 alt="" />
	</picture>

 

If you want to add a custom banner for desktop and for mobile then this feature would need to be added, however if you just want to use the same image and scale it depending on the screen size you can use the picture tag.

0 Likes
Highlighted
New Member
3 0 0
Hi there!

Where can I input this? Will it work cause whenever i make changes to the images, e.g changing pic kn desktop version, the mobile version changes as well.

Thanks,
Jj
0 Likes
Highlighted
New Member
3 0 0

Sorry bro, do advise further on the above code that you have sent, what is the purpose of it and where do I input this code?

Thank you so much,

JJ

0 Likes
Highlighted
Anonymous
Not applicable
1164 0 0

These changes can be applied to the <img> tag in the theme code (likely a section or snippet) where the image element appears.

0 Likes