I am using the Sprocket.io theme to build webpages and am experiencing issues with image sizing across operating systems.
Windows
iOS
The images are supposed to be responsive however they become smaller on iOS
I am using the Sprocket.io theme to build webpages and am experiencing issues with image sizing across operating systems.
Windows
iOS
The images are supposed to be responsive however they become smaller on iOS
Hi @karanmonga ,
U can send link of this page or preview page for us to see how it looks in the code?
Thanks! ![]()
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.
Thanks again, Venki!
You’ve been a huge help for both my issues!
Have a great day!
You are welcome Karan
Have a great day ahead!