Managing a website at has presented a curious challenge.
While it displays properly on Android devices, the UI appears distorted on Apple products. Specifically, below the slider, where two images are supposed to be shown horizontally, there seems to be a problem on iPhones.
I attempted to adjust the CSS by changing the width percentages, such as setting it to 49%, but unfortunately, these changes did not resolve the issue.
The styles being used are detailed below:
/* Create four equal columns that sit next to each other */
.column {
-ms-flex: 25%; /* IE10 */
flex: 25%;
max-width: 25%;
padding: 0 4px;
}
.column img {
margin-top: 8px;
vertical-align: middle;
}
/* Responsive layout - transforms to a two-column layout instead of four columns */
@media screen and (max-width: 800px) {
.column {
-ms-flex: 50%;
flex: 50%;
max-width: 50%;
}
}
/* Responsive layout - converts the two columns into a stacked format instead of side by side */
@media screen and (max-width: 600px) {
.column {
-ms-flex: 100%;
flex: 100%;
max-width: 50%;
}
}
If anyone could provide assistance with this matter, it would be greatly appreciated.