Responsive image not correct on some devices
<p>I'm trying to make my hero images responsive.
In normal they are 16:9 but in the mobile version I wanted the browser to display another image that I made in 1:1 ratio. However, on some devices it still shows the 16:9 version. This goes especially for the Samsung Galaxy S6. </p>

<p>I can't really wrap my head around the solution, and to be honest I do not have any similar products near me to be able to test it back and forth.</p>

<p>I know I'm missing a lot. I am blacked out right now..</p>

<pre><code>&lt;img src="{{ 'mainad1-image-2880.jpg' | asset_url }}" width="2880" srcset="
{{ 'mainad1-image-406.jpg' | asset_url }}  406w, 
{{ 'mainad1-image-608.jpg' | asset_url }}  608w, 
{{ 'mainad1-image-800.jpg' | asset_url }}  800w, 
{{ 'mainad1-image-1024.jpg' | asset_url }}  1024w, 
{{ 'mainad1-image-1050.jpg' | asset_url }}  1050w, 
{{ 'mainad1-image-1200.jpg' | asset_url }}  1200w, 
{{ 'mainad1-image-1440.jpg' | asset_url }}  1440w, 
{{ 'mainad1-image-1920.jpg' | asset_url }} 1920w, 
{{ 'mainad1-image-2880.jpg' | asset_url }} 2880w" 
sizes="(max-width: 2880px) 100vw, 2880px" 
alt="{{ settings.mainad_1_alt_text }}"/&gt;
</code></pre>