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

Steve Gallant
Steve Gallant
14,887 Points

Using display:inline method for columns - extra horiz whitespace after col 3

This was a good challenging exercise. I decided to try using display: inline rather than float to get more practice with it. Everything basically looks right except there is a ghost margin of sorts right after the text in the tertiary column when >1025px. I will post a screenshot if I figure out how. Google dev tools show the three columns taking up appropriate width, but there is just too much white space to the right of the text in column 3, making the layout look lopsided. Any tips appreciated!

Steve

CSS is pasted below. HTML file looks exactly like Guil's at the end with proper containers, etc.

---
/* =================================
  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 {
    font-size: 1.25em;
    margin: 0;
    text-align: center;
}

.main-nav {
    margin-top: 5px;
}

.main-nav li {
    text-align: center;
}

.name a,
.main-nav a {
    text-align: center;
    display: block;
    padding: 10px 15px;
}

.main-nav a {
    font-size: .95em;
    color: #3acec2;
    text-transform: uppercase;
}

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

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

.banner {
    color: #fff;
    background: #3acec2;
    padding: 3.2em 0;
    margin-bottom: 50px;
}

.col {
    padding-left: 1em;
    padding-right: 1em;
}

.main-header {
    padding-top: .5em;
    padding-bottom: .5em;
}

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

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

.logo {
    width: 190px;
}

.headline {
    margin-bottom: 0;

}

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

@media (min-width: 769px) {

.col {
    display: inline-block;
    vertical-align: top;
    margin: 0;
}

.container {
    width: 90%;
    margin: 0 auto;
}

.secondary,
.primary {
    width: 49%;
    background-color: lightblue;
}

.main-nav li {
    margin-left: 1.25em;
}

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

.name {
    margin-right: 50px;
}

.tagline {
    font-size: 1.4em;
}
    /* ---- Float clearfix ---- */

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

}   /* ----- end of media query block ----*/

@media (min-width: 1025px) {

.container {
        width: 80%;
        max-width: 1150px;
    }

.primary {
    width: 40%;
}

.secondary,
.tertiary {
    width: 27%;
}


}
---
Steve Gallant
Steve Gallant
14,887 Points

Attempting screenshot:

!(https://ibb.co/j6jdSm "Note extra light blue space after third column")

1 Answer

Andreas Nyström
Andreas Nyström
8,874 Points

Hi Steve.

When using inline-block there is automatic some space between each inline-block. Remember when you did the navigation with inline-block and you set margin-right: -4px to remove the spaces between the buttons? You can do a similiar thing here:

@media (min-width: 1025px) {

  .container {
    width: 80%;
    max-width: 1150px;
    }

  .primary {
    width: 40%;
    margin-right: -5px;
  }

  .secondary, .tertiary {
    width: 30%;
    margin-right: -5px;
}

}

Please note that what happens is that all columns together actually takes up 100% of the 1150 with now and is in fact centered with margin: auto now. Hope this helps buddy!

Steve Gallant
Steve Gallant
14,887 Points

Hello Andreas, thank you very much for the response. I did remember about the extra whitespace between inline-block elements, but did not think it would cause such a large effect. I added the negative margin and everything looks perfect now. Thanks!

Steve

Andreas Nyström
Andreas Nyström
8,874 Points

Anytime! If you think as this answer as the solution to your problem please mark it as "best answer". Thank you :)