Open rachael-tomaszewski opened 6 years ago
Can you post the CSS?
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:;
}
}
}
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?
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?