NotToBrag NotToBrag - 2 months ago 17
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>
</div>
</li>


The two
span
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
li
they are contained in).

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

I believe that this has to do with the
flex
and
flex-box
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: https://jsfiddle.net/kwcwyzb4/4/ (edited)

Answer

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: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

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.