How to resize my images for mobile (URGENT)

Highlighted
New Member
1 0 0

The images on mobile site are not align and of different sizes where can i add my coding and what codes should i put ? 

0 Likes
Highlighted

Hello ,
Please share your site url.
So that i can check and provide you exact solution here.

Want to modify or incorporate custom changes on store, Hire us.
If helpful then please Like and Accept Solution .
Email: pallavi@oscprofessionals.com
Skype : oscprofessionals-87
Free Review and advice for sale on store Shopify Conversion Experts | Shopify Private App | Custom Theme Development | Custom Modifications In To Shopify Theme | SEO & Digital Marketing | Site Speed Optimization | Performance Site Audit
0 Likes
Highlighted
Shopify Partner
123 4 51

Depending on what image you're trying to resize, there are a few different paths you can take:

 

1. Hot-loading relevant (different) images - This can be done by throwing liquid conditionals around a few different images loaded to your assets. For example, if the current width is that of a mobile device (which you can query inside the liquid conditional) you'd call a specific picture that fits that screen. This approach is a bit heavy on code, and will require physical different images on your theme's assets folder - https://help.shopify.com/en/themes/liquid/tags/control-flow-tags

2. Hot-changing the image based on the browser's properties - If you pre-define different widths (or heights) that are relevant to different browser properties, you can "hijack" the correct image on the fly. Something like this - https://gist.github.com/shopifypartners/924c78d3303cd90b0a7671f94d65f51c#file-responsive-images-narr... - can do the trick, probably. 

 

See more about both options here: https://www.shopify.com/partners/blog/using-responsive-images

 

But most of this is too low-level for most practical, day-to-day solutions. Just drop a link to your site here so we can take a better look.

0 Likes