CODEWITHSUNDEEP
htmlcssyui-pure-css
goodson
goodson

Reputation: 757

How to prevent a "break" for very small widths in pure css?

The snippet below presents a row of squares and a row of keys (not unlike the wordle game, which I'm attempting to build as a learning project). At very small widths the last tile column breaks off to a new row, and the last few keys break off, also.

using chrome tools

Is there any way to prevent this? I'd like the layout to just get narrower (no matter how small the screen) but still look good on a wide screen.

(It's curious that no matter how narrow I make the screen, only the last tile breaks, and the first four just squeeze. I hope to have all the tiles and keys behave as the first 4 tiles do... just squeeze)

Adding the "responsive" library to pure didn't help, and as I look at media queries (new to me) I only see a way to make things break sooner, not later. I've shrunk the margin below where it looks good on bigger displays, so I'm out of ideas there, too.

.centered-cols {
  justify-content: center;
  letter-spacing: normal;
}

.tile {
  text-align: center;
  max-width: 4em;
  min-height: 4.2em;
  border: solid;
  border-color: lightgrey;
  margin: 0.1em;
}

.key {
  text-align: center;
  min-width: 1.9em;
  margin: 0.2em;
  border-radius: 0.4em;
  background-color: #D4D6DA;
}

.akey {
  margin-left: 0.2em;
}

.special {
  min-width: 3em;
}
<link href="https://unpkg.com/[email protected]/build/grids-responsive-min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/build/pure-min.css" rel="stylesheet" />

<div class="pure-g centered-cols">
  <div id="00" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="01" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="02" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="03" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="04" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
</div>
<div class="pure-g centered-cols">
  <div id="enter" class="pure-u-1-9 key special">
    <p>&#x02713;</p>
  </div>
  <div id="z" class="pure-u-1-9 key">
    <p>Z</p>
  </div>
  <div id="x" class="pure-u-1-9 key">
    <p>X</p>
  </div>
  <div id="c" class="pure-u-1-9 key">
    <p>C</p>
  </div>
  <div id="v" class="pure-u-1-9 key">
    <p>V</p>
  </div>
  <div id="b" class="pure-u-1-9 key">
    <p>B</p>
  </div>
  <div id="n" class="pure-u-1-9 key">
    <p>N</p>
  </div>
  <div id="m" class="pure-u-1-9 key">
    <p>M</p>
  </div>
  <div id="backspace" class="pure-u-1-9 key special">
    <p>&larr;</p>
  </div>
</div>

Upvotes: 0

Views: 120

Answers (1)

Ahmad MRF
Ahmad MRF

Reputation: 1384

.pure-g class has flex-flow : row wrap property that cause to break tile to new row. with flex-flow : row nowrap the tiles stay at one row.

.centered-cols {
  justify-content: center;
  letter-spacing: normal;
}

.tile {
  text-align: center;
  max-width: 4em;
  min-height: 4.2em;
  border: solid;
  border-color: lightgrey;
  margin: 0.1em;
}

.key {
  text-align: center;
  min-width: 1.9em;
  margin: 0.2em;
  border-radius: 0.4em;
  background-color: #D4D6DA;
}

.akey {
  margin-left: 0.2em;
}

.special {
  min-width: 3em;
}


.pure-g:first-of-type {
  flex-flow: row nowrap;
}
<link href="https://unpkg.com/[email protected]/build/grids-responsive-min.css" rel="stylesheet" />
<link href="https://unpkg.com/[email protected]/build/pure-min.css" rel="stylesheet" />

<div class="pure-g centered-cols">
  <div id="00" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="01" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="02" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="03" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
  <div id="04" class="pure-u-1-5 tile">
    <h2></h2>
  </div>
</div>
<div class="pure-g centered-cols">
  <div id="enter" class="pure-u-1-9 key special">
    <p>&#x02713;</p>
  </div>
  <div id="z" class="pure-u-1-9 key">
    <p>Z</p>
  </div>
  <div id="x" class="pure-u-1-9 key">
    <p>X</p>
  </div>
  <div id="c" class="pure-u-1-9 key">
    <p>C</p>
  </div>
  <div id="v" class="pure-u-1-9 key">
    <p>V</p>
  </div>
  <div id="b" class="pure-u-1-9 key">
    <p>B</p>
  </div>
  <div id="n" class="pure-u-1-9 key">
    <p>N</p>
  </div>
  <div id="m" class="pure-u-1-9 key">
    <p>M</p>
  </div>
  <div id="backspace" class="pure-u-1-9 key special">
    <p>&larr;</p>
  </div>
</div>

Upvotes: 0

Related Questions