Pure css grid problem when changing the chrome screen size to mobile size

Question

I try to use pure css grid system like explained in the documentation but I'm not able to make it work on desktop resolution and mobile like Pixel 2 resolution.

Instead of going on 2 lines like this :

I got this letter-spacing problem and the div goes on the same line :

Like to code example

    <div class="pure-g">
            <div class="pure-u-sm-1-1 pure-u-md-1-1 pure-u-lg-9-24">
                <div class="l-box">
                  <span class="fa-stack">
                    <i class="fa fa-circle fa-stack-1And5x"></i>
                    <strong class="fa-stack-1x label-white">4</strong>
                  </span>
                    <label>Test:</label>

                </div>
            </div>
            <div class="pure-u-sm-1-1 pure-u-md-1-1 pure-u-lg-15-24">
                <div class="l-box">
                    <input class="pure-radio" id="montant" name="montant" type="text" value="">

                </div>
            </div>
          </div>

Answer 1

There is a problem with your grid system and your media queries.

sm specifies the behavior only for screen sizes with a width of at least 568px. Below that your problem occurs.

To solve this add the pure-u-1-1 class respectively - you could say it defines your standard behavior. This alone won't work though because you make use of another stylesheet for normalizing your CSS. Put your normalizing CSS file in front of the other stylesheet in your code, otherwise it overrides some of your other CSS rules (keyword cascading style sheet). Always mention your normalizing CSS files first!

Also in this case the pure-u-md-1-1 class seems obsolete because it does not specify another behavior than pure-u-sm-1-1. The latter already defines the same behavior for all screen sizes of at least 568px.