Why is my image small on mobile?

[dave8794]

Hi, I have a div with an image that shows on mobile but not on large screens. Even though I’m not displaying the image on large screens, the image still loads, which I understand. To help mitigate the load time for that image on large screens, I deferred the image loading which works perfectly.

Here is the HTML:

<img class="samplepic2" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" alt="Sample" data-src="http://www.modovis.com/wp-content/uploads/2016/01/CHAIR1-1.jpg" />

Here is the result on mobile which looks perfect:

I now want to reduce the image load time on large screens even further by not only deferring the image load, but only loading a data image in its place on large screens 1x pixel ratio and leaving the full image on mobile 2x pixel ratio. Below is my HTML for which I attempted and then the result.

Html:

<img class="samplepic2" src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" srcset="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs 1x, data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs 2x" alt="Discovery" width="110" height="110" data-srcset="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs= 1x, http://www.modovis.com/wp-content/uploads/2016/01/CHAIR1-1.jpg 2x" data-src="http://www.modovis.com/wp-content/uploads/2016/01/CHAIR1-1.jpg" />

Result:

Why is the image small? Thank you for any insight.

My Page.

[PaulOB]

@dave8794

Why is the image small?

It’s small because you are adding 20% of padding to it thus reducing its available width by 20%.

@media (max-width: 800px) and (orientation: portrait){
/*themify-customizer.css:3013*/
.samplepic2 {
    padding-left: 10%;
    padding-right: 10%;
    padding-bottom: 5%;
}
}

If you remove the padding the image will stretch back to the 110px width that you specify.

If you want space outside the image then use margins not padding.

[dave8794]

Hi Paul,

But that padding you reference was there before and worked fine. Its the same image. The only change I have made was to have a data image show in its place on large screens.

[PaulOB]

@dave8794

The only change I have made was to have a data image show in its place on large screens.

Are you sure?

It looks to me as though you are now specifying the size at width:110px in the img tag whereas in your original rule you have no width in the html.

Obvioulsy I can’t tell what you had before but if you remove the padding and the width then that small mobile image will stretch to fit.

Like this screenshot after I have done same in devtools:

[dave8794]

Paul, you are absolutely correct, I completely overlooked that. I removed the height and width and now its working perfectly. Thank you so much for taking the time