CODEWITHSUNDEEP
csssafari
Christian Mayne
Christian Mayne

Reputation: 1749

Line wrap in div breaks format in Safari only

I have a strange css problem that appears to exist only in Safari.

I have rows of 5 boxes. There is no attempt to make this responsive, each box is 160px wide and they fit within a set width container of 900px.

See here: http://bit.ly/1rs97IB

In Safari only, when a box title wraps onto two lines, the whole box is pushed upwards outside of the row. This does not happen within IE, Opera, Firefox or Chrome. Can anyone work out what might be causing this and suggest an approach to fixing it? It's driving me a bit nuts...

Upvotes: 1

Views: 2010

Answers (1)

Mandera
Mandera

Reputation: 3017

After a lot of experimenting I came up with this: Change the display to flex for two of the containers.

.post_gallery_row {
    margin-bottom: 21px;
    padding-bottom: 0px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

.post_gallery_item {
    width: 160px;
    margin-right: 21px;
    margin-left: 0px;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
}

I have no idea what specifically caused the error, but this is something atleast and I hope it helps.

Upvotes: 1

Related Questions