CSS CSS Layout Basics CSS Layout Project Column Layout with Media Queries

Lucas Guimarães
seal-mask
.a{fill-rule:evenodd;}techdegree
Lucas Guimarães
Front End Web Development Techdegree Student 3,900 Points

I have some questions about clearfix and inline x float.

Well, my project works but I am not sure it would be right. I used clear: both; only instead of the clearfix. Another question is, in that part of the .col, I used inline-block with float inside of the content. Probably it is because I haven`t created one <div class="container"></div>, I guess that. So my question is, should it be ok?

Please, one feedback about my project would be really awesome !!!

Thanks

Follow my code

/*
  If you get stuck, feel free to watch the follow-up videos where I'll show you one solution
*/

/* ================================= 
  Base Element Styles
==================================== */

* {
    box-sizing: border-box;
}

body {
    font-family: 'Varela Round', sans-serif;
    line-height: 1.6;
    color: #3a3a3a;
}

p {
    font-size: .95em;
    margin-bottom: 1.8em;
}

h2,
h3,
a {
    color: #093a58;
}

h2,
h3 {
    margin-top: 0;
}

a {
    text-decoration: none;
}

img {
    max-width: 100%;

}

/* ================================= 
  Base Layout Styles
==================================== */

/* ---- Navigation ---- */

.name {
  text-align:center;
    font-size: 1.25em;
  margin: 0;
}

.main-header {
width: 100%;
}

.name a,
.main-nav a {
    text-align: center;
  display:block;
}
.main-nav {
text-align:center;
}
.main-nav a {
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;

  }

.main-nav a:hover {
    color: #093a58;
}



/* ---- Layout Containers ---- */

.banner {
    color: #fff;
    background: #3acec2;
  text-align:center;
  padding-bottom: 20px;
  padding-top: 20px;
}

.main-footer {
    background: #d9e4ea;
    padding: 2em 0;
    margin-top: 30px;
  text-align:center;
  }

.headline {
margin: 0;
  margin-top: 10px;
}

/* ---- Page Elements ---- */

.logo {
margin-top: 40px;
width: 190px;
}

.col {
margin: 1em; 
}

/* ================================= 
  Media Queries
==================================== */

@media (min-width: 1025px) {

.main-header,
.main-nav li {
display: inline-block;
}

.name,
.main-nav {
vertical-align: top;
    padding: 0;
    margin: 0;
}

.main-nav li a {
padding-left: 2em;
  padding-right: 2em;
}


.name {
float: left;
    padding-top: 1em;
  padding-left: 2em;
}


.main-nav {
float: right;
  padding-top: 1.6em;
  padding-right: 2em;
}

.col {
  display:inline-block;
margin-top: 40px;
  margin: 0;
  padding:0px;
}

.primary,
.secondary,
.tertiary {

  vertical-align: top;
  margin-top: 4em;
    padding-left: 3em;
}
.secondary {
  float:left;
  width: 30%;
 }

.primary {
  width: 40%;
  }

.tertiary {
  float:right;
  width: 30%;
  padding-right: 3em;
  }

.main-footer {
clear: both;
  text-align:center;
}

    /* ---- Float clearfix ---- */

    .clearfix::after {
        content: " ";
        display: table;
        clear: both;
    }

}

@media (min-width: 769px ) and (max-width: 1024px) {

/* ----- The same from @media 1025px -------- */

.main-header,
.main-nav li {
display: inline-block;
}

.name,
.main-nav {
vertical-align: top;
    padding: 0;
    margin: 0;
}

.main-nav li a {
padding-left: 2em;
  padding-right: 2em;
}

.name {
float: left;
    padding-top: 1em;
  padding-left: 2em;
}

.main-nav {
float: right;
  padding-top: 1.6em;
  padding-right: 2em;
}

/* ----- End -------- */

.primary,
.secondary,
.tertiary {
  margin:0;
  padding-top:3em;
  padding-left:3em;

}

.secondary {
  float: left;
  width: 50%;

 }

.primary {
  float:right;
  width: 50%;
  padding-right:3em;
    }

.tertiary {
  float:none;
  width: 100%;
    clear: both;
  padding-top:0;
  padding-right:3em;
  }

}
///
Steven Parker
Steven Parker
204,019 Points

To enable others to see your project operating, you need to share all the code, including the HTML part. An easy way to do that without taking up much forum space is to make a snapshot of your workspace and post the link to it here.

1 Answer

Steven Parker
Steven Parker
204,019 Points

The "clearfix" also performs a "clear: both", but it does it using a pseudo-element added to the end of the container. The advantage of that over just applying the same property to a following element is that the clearfix insures that the element containing the floats extends around them. But there may not be any obvious visual difference unless that container has a background or border.