Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

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

Posted by Rebecca Aston
.a{fill-rule:evenodd;}techdegree seal-36
Rebecca Aston
UX Design Techdegree Graduate 13,955 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.

1 Answer

Rebecca Aston
seal-mask
.a{fill-rule:evenodd;}techdegree seal-36
Rebecca Aston
UX Design Techdegree Graduate 13,955 Points
Rebecca Aston
.a{fill-rule:evenodd;}techdegree seal-36
Rebecca Aston
UX Design Techdegree Graduate 13,955 Points

Hello,

I've solved this myself.

Thank you

Rebecca