Another Issue with Linking

[rachael-tomaszewski]

For some reason my CSS styles aren't all showing up on my file even when I save them so what I have coded isn't showing up at all visually. Its linked properly to my html, so I'm not sure what the problem could be. Does anyone have any idea?

[gallm551]

Can you post the CSS?

[rachael-tomaszewski]

Here's what it looks like right now. Keep in mind some of the sizing for the adjustments are blank because I'm still working on them.

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  padding: 0;
}

body {
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

.content {
  font-family: 'Montserrat', sans-serif;
  font-size: 0;
  height: 100%;
  width: 100%;
}

.center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.box {
  width: 33.33%;
  height: 100%;
  background-color: blue;
  color: white;
  display: inline-block;
  vertical-align: top;
  position: relative;
}

.box-content {
  font-size: 36px;
}

.box-1 {
  background-color: #438c4f;
  text-align: center;
}

.box-2 {
  background-color: #f6fbf7;
  text-align: center;
}

.box-3 {
  background-color: #ad100e;
  text-align: center;
}

.row {
  font-size: 36px;
  height: 50%;
 }

 .row-1 {
  background-color: #69438d
 }

 .row-2 {
  background-color: #1b1952;
}

 .row-3 {
  background-color: #f9f77f;
 }

 /*small*/
@media only screen and (min-width: 600px) {
  .box {
    width: 50%;
  }
  .box-3 {
    width: 50%;
    height: 50vh;
  }
}

.row {
  font-size: 12px;
  line-height: 1.2;
}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {
  .box {
    width: 33.33%;
    height: 50vh;
  }

  .box-1 {
    width: 33.33%
    height:50vh;
  }

  .box-2 {
    width: 33.33%
    height:50vh;
  }

  .row {
    font-size: 48px;
    line-height: 1.6;
  }

  .box-3 { 
    height: 100vh;
  }
}

/* Large devices (laptops/desktops, 1025px and up) */
@media only screen and (min-width: 1025px) {
  .box {
    width: 50%
    height 50vh;
  }

  .box-1 {
    width: 
    height:;
  }

  .box-2 {
    width:
    height:;

  }

  .box-3 {
    width:
    height:;
  }

  .row {
    font-size:
    line-height:;
  }
}

/* Extra large devices (large laptops and desktops, 1400px and up) */
@media only screen and (min-width: 1400px) {
  .box {
    width: 50%
    height 50vh;
  }

  .box-1 {
    width: 
    height:;
  }

  .box-2 {
    width:
    height:;

  }

  .box-3 {
    width:
    height:;
  }

  .row {
    font-size:
    line-height:;
  }
}
}

[gallm551]

I'm not entirely sure, but could it be that something is off with your ending } brackets? There seems to be a few too many in some places, like here:

 /*small*/
@media only screen and (min-width: 600px) {
  .box {
    width: 50%;
  }
  .box-3 {
    width: 50%;
    height: 50vh;
  }
}

.row {
  font-size: 12px;
  line-height: 1.2;
}

Maybe it got mixed up when copying and pasting?