CODEWITHSUNDEEP
cssios
d3vdpro
d3vdpro

Reputation: 3007

CSS Issue for width on Apple iphones

There is a website I am handling https://www.onlinesalebazaar.in/.

When opened on Android it looks fine, but on Apple, the UI is distorted. Beneath the slider it's intended to show 2 images horizontally but on iPhone it is distorted.

I tried changing the CSS to width 49% etc, but nothing works.

Styles used is as follows:

/* Create four equal columns that sits 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 - makes 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 - makes the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 600px) {
    .column {
        -ms-flex: 100%;
        flex: 100%;
        max-width: 50%;
    }
}

Can someone help please on this

Upvotes: 1

Views: 689

Answers (1)

epsilon42
epsilon42

Reputation: 2023

Bootstrap is causing this to happen with this bit of CSS:

.row:before, 
.row:after {
  display: table;
  content: " ";
}

Safari on iOS counts these pseudo elements as actual elements thus causing the flex container to have an additional child element before and after it.

By adding the CSS below it will make the items appear properly in iOS Safari:

.row:before, 
.row:after {
  display: none;
}

This may have an undesired effect elsewhere so it's probably recommended to add a class to target those rows that use flex and do something like this instead:

.myFlexRow.row:before, 
.myFlexRow.row:after {
  display: none;
}

You're using Bootstrap 3.2 for your site which wasn't built with flexbox in mind. With Bootstrap 4+ you would simply be able to use the .d-flex class instead.

Upvotes: 1

Related Questions