Image size changes on iOS and Windows

[karanmonga]

I am using the Sprocket.io theme to build webpages and am experiencing issues with image sizing across operating systems.

WindowsiOS

The images are supposed to be responsive however they become smaller on iOS

[Venki · Accepted solution]

Hi Karan,

For mobile view,

Try css media queries and increase the height and width of the image accordingly

based on your requirement.

Let me know if this solution worked for you.

For your reference: 

iPhone 10

@media only screen
and (min-device-width : 375px)
and (max-device-width : 812px)
and (-webkit-device-pixel-ratio : 3) 

{ 

.your_css_rule

{ width:"" ;

  height:"";

}

}

iPhone 6, 7, & 8 

@media only screen
and (min-device-width : 375px)
and (max-device-width : 667px)

{

.your_css_rule

{ width:"" ;

  height:"";

}

}

iPhone 6, 7, & 8 Plus 
@media only screen
and (min-device-width : 414px)
and (max-device-width : 736px) 

{

.your_css_rule

{ width:"" ;

  height:"";

}

}

 Hope you will find the media queries for the remaining devices.

[karanmonga]

Thanks again, Venki!

You've been a huge help for both my issues!

Have a great day!

[Venki]

You are welcome Karan
Have a great day ahead!

[DanielSanchez]

Hi @karanmonga ,

U can send link of this page or preview page for us to see how it looks in the code?

Thanks! 🙂