Search code examples
htmlcssflexboxviewport-units

Flexbox: text not shrinking proportionally

For a website I am creating, I managed to recreate the company logo (which is fairly basic) in Flexbox/CSS. I found the Flexbox CSS somewhere on the internet, but don't recall where. It's mainly untouched, my own styles are at the bottom under /* My Styles */

So it works, basically - but when I resize my browser window to fake tablet-size-screen of phone-size-screen, the text inside the logo starts to shrink when the screen size gets smaller than 568px.

There is some CSS

@media all and (max-width: 568px) {
.col-span-1,
.col-span-3,
.col-span-4,
.col-span-5 {
flex-basis: 50%;
}

that seems to have something to do with the text getting smaller, but I just don't understand. Until a few days ago, I had not heard about flexbox so I am no guru when it comes to that.

I need the text inside the logo to grow and shrink proportionally no matter what the screen size is, but I also need the flexboxes to shove below each other when the screen size gets smaller than 568px.

Can you guys help me out on this one?

Thank in advance for your help and time, it's very much appreciated!

Kind regards,

Fieke Bazelmans

PS In the Code snippet below, the result-frame is smaller than 568px (on my MacBook Pro 13"), so I'm not sure you guys can see how the logo should be looking, therefor I'll add a link to a picture of the logo to make sure you understand my crappy explanation ;)

Picture of original logo

@charset "UTF-8";

/* CSS Document */

.row {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 1 8%;
  margin: 0 0 0.5rem 0;
  padding: 0.5em 10px;
  box-sizing: border-box;
}

.col-logo {
  flex: 1 1 8%;
  margin: 0;
  padding: 0.5em 10px;
  box-sizing: border-box;
}


/* nested grids */

.row .row,
.row.nested {
  flex: 1 1 auto;
  margin-top: -0.5em;
}


/* full width grids */

.row.wide-fit {
  margin-left: -10px;
  margin-right: -10px;
}


/* center grids */

.row.center {
  justify-content: center;
}

.center .col {
  flex-grow: 0;
  flex-shrink: 0;
}


/* columns widths */

.col-span-1 {
  flex-basis: 8.3333%;
}

.col-span-2 {
  flex-basis: 16.6666%;
}

.col-span-3 {
  flex-basis: 25%;
}

.col-span-4 {
  flex-basis: 33.3333%;
}

.col-span-5 {
  flex-basis: 41.6666%;
}

.col-span-6 {
  flex-basis: 50%;
}

.col-span-7 {
  flex-basis: 58.3333%;
}

.col-span-8 {
  flex-basis: 66.6666%;
}

.row .col-logo.col-span-8 {}

.col-span-9 {
  flex-basis: 75%;
}

.col-span-10 {
  flex-basis: 83.3333%;
}

.col-span-11 {
  flex-basis: 91.6666%;
}

.col-span-12 {
  flex-basis: 100%;
}


/* examples */

.fixed-width {
  flex: 0 0 500px;
  background-color: rgba(255, 0, 0, 0.1) !important;
}

@media all and (max-width: 568px) {
  .col-span-1,
  .col-span-2,
  .col-span-3,
  .col-span-4,
  .col-span-5 {
    flex-basis: 50%;
  }
  .col-span-6,
  .col-span-7,
  .col-span-8,
  .col-span-9,
  .col-span-10,
  .col-span-11 {
    flex-basis: 100%;
  }
  .nested .col {
    flex-basis: 100%;
  }
}


/* eye candy */

body {
  font-family: sans-serif;
}

.row {
  background-color: #cccccc;
  background-color: rgba(0, 0, 0, 0.1);
}

.col {
  background-color: #999999;
  background-color: rgba(0, 0, 0, 0.2);
  background-clip: content-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
}


/* My Styles */

#header-logo-text-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}

.header-logo-container {
  min-width: 0;
  background-color: #eb5d60;
  padding: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo-container:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.logo-whiteborder {
  border: 0.4vw solid white;
  display: flex;
  justify-content: center;
}

.logo-whiteborder:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.header-logo-text-big {
  color: white;
  display: flex;
  flex-shrink: 1;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  src: url('../font-gill-sans.woff');
  font-size: 3.3vw;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  padding-left: 1vw;
  padding-right: 1vw;
}

.header-logo-text-small {
  color: white;
  display: flex;
  flex-shrink: 1;
  font-family: "Times New Roman";
  font-size: 1.4vw;
  letter-spacing: 0.12em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.7vw;
  margin-bottom: 1.7vw;
  min-width: 0;
  padding-left: 1vw;
  padding-right: 1vw;
}
<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link href="css/durlinger-style.css" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="row">

    <div class="col-logo col-span-4 header-logo-container">
      <div class="col-span-11 logo-whiteborder">
        <div id="header-logo-text-container">
          <div class="header-logo-text-big">Durlinger</div>
          <div class="header-logo-text-small">financieel beheer</div>
        </div>
      </div>
    </div>

    <div class="col-logo col-span-8">
      <!-- text beside logo -->

    </div>

  </div>

</body>

</html>

Solution

  • Since your font size using viewport units vw, you need to change them too with your media query, to something like this, which I also added to your @media rule in below snippet

    .header-logo-text-big {
  font-size: 13.2vw;
}
.header-logo-text-small {
  font-size: 5.6vw;
}

    Also, for media query's to properly override previous rules they should be last in your CSS

    Stack snippet

    @charset "UTF-8";

/* CSS Document */

.row {
  margin-top: 0.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.col {
  flex: 1 1 8%;
  margin: 0 0 0.5rem 0;
  padding: 0.5em 10px;
  box-sizing: border-box;
}

.col-logo {
  flex: 1 1 8%;
  margin: 0;
  padding: 0.5em 10px;
  box-sizing: border-box;
}


/* nested grids */

.row .row,
.row.nested {
  flex: 1 1 auto;
  margin-top: -0.5em;
}


/* full width grids */

.row.wide-fit {
  margin-left: -10px;
  margin-right: -10px;
}


/* center grids */

.row.center {
  justify-content: center;
}

.center .col {
  flex-grow: 0;
  flex-shrink: 0;
}


/* columns widths */

.col-span-1 {
  flex-basis: 8.3333%;
}

.col-span-2 {
  flex-basis: 16.6666%;
}

.col-span-3 {
  flex-basis: 25%;
}

.col-span-4 {
  flex-basis: 33.3333%;
}

.col-span-5 {
  flex-basis: 41.6666%;
}

.col-span-6 {
  flex-basis: 50%;
}

.col-span-7 {
  flex-basis: 58.3333%;
}

.col-span-8 {
  flex-basis: 66.6666%;
}

.row .col-logo.col-span-8 {}

.col-span-9 {
  flex-basis: 75%;
}

.col-span-10 {
  flex-basis: 83.3333%;
}

.col-span-11 {
  flex-basis: 91.6666%;
}

.col-span-12 {
  flex-basis: 100%;
}


/* examples */

.fixed-width {
  flex: 0 0 500px;
  background-color: rgba(255, 0, 0, 0.1) !important;
}


/* eye candy */

body {
  font-family: sans-serif;
}

.row {
  background-color: #cccccc;
  background-color: rgba(0, 0, 0, 0.1);
}

.col {
  background-color: #999999;
  background-color: rgba(0, 0, 0, 0.2);
  background-clip: content-box;
  border: 1px solid rgba(0, 0, 0, 0.1);
}


/* My Styles */

#header-logo-text-container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-end;
}

.header-logo-container {
  min-width: 0;
  background-color: #eb5d60;
  padding: 1vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.header-logo-container:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.logo-whiteborder {
  border: 0.4vw solid white;
  display: flex;
  justify-content: center;
}

.logo-whiteborder:after {
  content: "";
  display: block;
  padding-bottom: 100%;
}

.header-logo-text-big {
  color: white;
  display: flex;
  flex-shrink: 1;
  font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, "sans-serif";
  src: url('../font-gill-sans.woff');
  font-size: 3.3vw;
  margin-left: auto;
  margin-right: auto;
  min-width: 0;
  padding-left: 1vw;
  padding-right: 1vw;
}

.header-logo-text-small {
  color: white;
  display: flex;
  flex-shrink: 1;
  font-family: "Times New Roman";
  font-size: 1.4vw;
  letter-spacing: 0.12em;
  margin-left: auto;
  margin-right: auto;
  margin-top: 1.7vw;
  margin-bottom: 1.7vw;
  min-width: 0;
  padding-left: 1vw;
  padding-right: 1vw;
}

@media all and (max-width: 568px) {
  .col-span-1,
  .col-span-2,
  .col-span-3,
  .col-span-4,
  .col-span-5 {
    flex-basis: 50%;
  }
  .col-span-6,
  .col-span-7,
  .col-span-8,
  .col-span-9,
  .col-span-10,
  .col-span-11 {
    flex-basis: 100%;
  }
  .nested .col {
    flex-basis: 100%;
  }

  .header-logo-text-big {
    font-size: 13.2vw;
  }
  .header-logo-text-small {
    font-size: 5.6vw;
  }

}
    <!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Untitled Document</title>
  <link href="css/durlinger-style.css" rel="stylesheet" type="text/css">
</head>

<body>

  <div class="row">

    <div class="col-logo col-span-4 header-logo-container">
      <div class="col-span-11 logo-whiteborder">
        <div id="header-logo-text-container">
          <div class="header-logo-text-big">Durlinger</div>
          <div class="header-logo-text-small">financieel beheer</div>
        </div>
      </div>
    </div>

    <div class="col-logo col-span-8">
      <!-- text beside logo -->

    </div>

  </div>

</body>

</html>