Image size changes on iOS and Windows

Highlighted
New Contributor

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

WindowsWindowsiOSiOS

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

Reply
0 Upvotes
2 Replies 2
Highlighted
Regular Advisor

Hi @karanmonga ,

 

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

 

Thanks! 🙂

Reply
0 Upvotes
Highlighted
Regular Contributor

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.

Reply
0 Upvotes