CSS CSS Flexbox Layout Building a Layout with Flexbox Creating a Three Column Layout with Flexbox

Rebecca Aston
Rebecca Aston
UX Design Techdegree Student 10,638 Points

HELP: Flexbox Layout - Background Image

Hello,

I am experimenting with the CSS Flexbox project using my own content. I am stuck on trying to make a background image fit the full length of the banner area with no white space, using Flexbox.

Please find below the HTML:

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Best City Guide</title>
    <link href='https://fonts.googleapis.com/css?family=PT+Sans' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="base.css">
    <link rel="stylesheet" href="flexbox.css">
</head>
<body>

    <header class="main-header">
        <h1 class="name"><a href="#">Dr Katherine Dandridge</a></h1>
        <ul class="main-nav">
            <li><a href="#">HOME</a></li>
            <li><a href="#">TREATMENTS</a></li>
            <li><a href="#">ABOUT</a></li>
            <li><a href="#">CONTACT</a></li>
            <li><a href="#">BLOG</a></li>
        </ul>
    </header><!--/.main-header-->

    <div class="banner">
        <img class="bg-img-cover" src="img/background-image.png" alt="nature">
        <h1 class="headline">Dr Katherine Dandridge</h1>
        <span class="tagline">Practitioner of Chinese Medicine</span>
    </div><!--/.banner-->

    <div class="row">
        <div class="primary col">
            <img class="feat1-img" src="img/acu.png" alt="Acupuncture">
            <h2>TCM Acupuncture</h2>
            <p>TCM Acupuncture sessions with Katherine are available in 50min, 1hr 20min and 1hr 50min.
            Every session includes a consultation whereby a decision will made on the best approach for the session.
            Treatment may include bodywork, acupuncture, acupressure, gua sha scraping therapy, cupping and moxibustion.</p>
      <a class="button" href="#">Learn More</a>
        </div><!--/.primary-->


        <div class="secondary col">
            <img class="feat2-img" src="img/facial.jpg" alt="Facial Rebirth">
            <h2>Facial Rebirth</h2>
            <p>Embark on this treatment journey by releasing and harmonising energy in the paraspinal points on the back prior to a full acupuncture facial enhancement treatment.
      Body points to address your internal root picture within and facial points to transform your facial musculature, lines and skin texture for a truly restored and revitalised appearance.
      </p>
            <a class="button" href="#">Learn More</a>
        </div><!--/.secondary-->


    <div class="tertiary col">
        <img class="feat3-img" src="img/coaching.png" alt="Future Self Sessions">
        <h2>Future Self Sessions</h2>
        <p>Future Self sessions are available in 50min, 1hr 20min and 1hr 50min.
           These health mindset strategic coaching sessions tackle head on what is
             really getting in your way with regards to your health and wellbeing. By
             using traditional methods of breathwork and visualisation and cutting
             edge techniques you will emerge from the polarities holding you
             back.</p>
             <a class="button" href="#">Learn More</a>
         </div><!--/.tertiary-->
    </div>



    <footer class="main-footer">
        <span>&copy;2018 Dr Katherine Dandridge.</span>
    </footer>

</body>
</html>

Base CSS

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

* {
    box-sizing: border-box;
}
body {
    font-family:'PT Sans', sans-serif;
    line-height: 1.6;
    color: #000000;
    margin: 0;
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
p {
    font-size: .95em;
    margin-bottom: 1.8em;
}
h2,
h3,
a {
    color: #000000;
}
h2,
h3 {
    margin-top: 0;
}
a {
    text-decoration: none;
}
img {
    max-width: 100%;
}

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

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

.name {
    font-size: 1.35em;
    margin: 0;
}
.main-nav {
    margin-top: 5px;
}
.name a,
.main-nav a {
    text-align: center;
    display: block;
    padding: 10px 15px;
}
.main-nav a {
    font-size: .95em;
    color: #000000;
    text-transform: uppercase;
}
.main-nav a:hover {
    color: #c7e1c7;
}

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

.main-header {
    padding-top: .5em;
    padding-bottom: .5em;
}
.banner,
.main-footer {
    text-align: center;
}
.banner {
    color: #fff;
    padding: 0;
  margin: 0;
    margin-bottom: 50px;
    }

.col {
    padding-right: 1em;
    padding-left: 1em;
}
.main-footer {
    background: #c7e1c7;
    padding: 2em 0;
    margin-top: 30px;
}

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

.logo {
    width: 190px;
}
.headline {
    margin-bottom: 0;
}
.feat1-img,
.feat2-img,
.feat3-img {
    border-radius: 5px;
}
.button {
    color: #FFFFFF;
    text-align: center;
    padding: .625em 1.25em;
    background: #c7e1c7;
    border-radius: .35em;
}

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

@media (min-width: 769px) {
    .main-header,
    .row {
        width: 90%;
        margin: 0 auto;
    }
    .tagline {
        font-size: 1.4em;
    }
}
@media (min-width: 1025px) {
    .main-header,
    .row {
        width: 80%;
        max-width: 1150px;
    }
}

Flexbox CSS

/* =================================
  Base Styles
==================================== */
body {

  display:flex;
  flex-direction: column;
  min-height: 100vh;
}

.row {
  flex: 1;
}




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

@media (min-width: 769px) {
  .main-header,
  .main-nav,
  .row,
  .col,
  .banner
  {
    display: flex;
      }

  .col {
     flex: 1 50%;
     flex-direction: column;

    }
    .button {
      margin-top: auto;
      align-self: center;
    }

  }

@media (min-width: 1025px) {
   .main-header {
     flex-direction: row;
     justify-content: space-between;
 }

}

Thank you in advance.