What proportions to use for mobile image banner to get the image to fill the width of the section

[KyloThomo]

Have been trying to display a different image banner image between desktop and mobile. Have tried mutiple shapes and sizes for the mobile image - but just cant seem to get it right. My latest attempt was made as 1200x600px and is working well as a fixed scroll image - however it does not fill the full width of the section. How can i make this image more responsive to the size of the section on mobile? 

Please share any help you have with regards to this. 

[rajweb]

Hey @KyloThomo ,

It sounds like you’re using different images for desktop and mobile but struggling with responsiveness, particularly getting the mobile image to fill the full width of the section. Here’s a structured approach to fix it:

Use <picture> for Responsive Images

Code:

<picture>
  <source srcset="your-mobile-image.jpg" media="(max-width: 768px)">
  <img src="your-desktop-image.jpg" alt="Banner Image" style="width: 100%; height: auto; display: block;">
</picture>

This will correctly display different images for desktop and mobile while making the mobile image fully responsive. Let me know if you need any refinements! 

To implement this, please reach out to me in the signature below. Thanks! I would be happy to help you.

If I was able to help you, please don't forget to Like and mark it as the Solution! 

Best Regard,
Rajat

[Shopify Expert]