NotToBrag NotToBrag - 1 year ago 98
CSS Question

Flex working on web but not mobile

Here is my code:

<li class="new">
<div id="left-content">
<span id="right" class="btn btn-primary label">0</span>
<span class="btn btn-primary label">0</span>

The two
elements that I have appear centered when previewing my website on my desktop with Chrome (i.e: the top and bottom margins are the same relative to the
they are contained in).

However, when viewing on mobile Chrome and mobile Safari, the two
appear at the top of the
rather than centered how I'd like them to be.

I believe that this has to do with the
properties in my code but I have checked compatibility and I've also used an autoprefixer to make sure that the CSS would be cross-browser compatible but it still appears to cause the same issue.

Here's a link to my fiddle: (edited)

Answer Source

The issue here are align-items and justify-content properties set for #left-content element.

You set them both to left which is not even a correct value for those properties. Possible values are:

align-items: stretch|center|flex-start|flex-end|baseline|initial|inherit

justify-content: flex-start|flex-end|center|space-between|space-around|initial|inherit

In this case you should set:

align-items: center; justify-content: space-between;

More about flexbox properties:

Also, you should replace #left-content, #right and similar ids with classes. If you have two or more elements with the same id on the same page it can cause all kinds of bugs. It's strongly recommended to stick to classes for styling purposes.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download