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

Posted by Kristian Woods
Kristian Woods
23,414 Points

Why isn't the block level element moving?

Hey, I know this is a lot of code, but could someone shed light on why the h2 "Activities", isn't sitting BELOW the last of the 3 images in mobile view? it sits right below the first of the three images. I can't figure out why.

Thanks

<!DOCTYPE html>
<html lang="">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" type="text/css" href="css/normalize.css">
    <link href="https://fonts.googleapis.com/css?family=Montserrat:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/base.css">
    <link rel="stylesheet" type="text/css" href="css/main.css">
    <title>GoDo Glasgow - Home</title>
</head>

<body>
   <div id="container">
    <header id="main_header">
            <nav id="main_nav">
               <img src="img/logo.svg" alt="Go Do Glasgow Logo" class="logo" title="GoDo Glasgow logo">
               <h4 id="logo_tag">GoDo <span class="logo_span">Glasgow</span></h4>
                <ul>
                    <li><a href="#">Home</a></li>
                    <li><a href="#">Activities</a></li>
                    <li><a href="#">Food &amp; Drink</a></li>
                    <li><a href="#">Hotels</a></li>
                </ul>
            </nav>
             <hgroup id="header_tags" title="Heading">
                 <h1>Explore Glasgow</h1>
                 <h3>Esse do laborum iis noster si noster eu excepteur. Et nulla summis hic officia. 
                     Et</h3>
             </hgroup>
             <div id="banner_link_div">
                 <a class="banner_signup" href="#">Sign up!</a>
                 <a class="banner_viewall" href="#">View all</a>
             </div>

    </header>
    <section id="top_card_section">
       <div class="top_card top_card_food">
           <div class="top_card_thumbnail">
               <img src="img/top_card_food.jpg" alt="picture of food" title="picture of food">
           </div>
           <div class="top_card_text">
               <h2>Food &amp; Drink</h2>
               <p>Ubi an irure multos illum, in eram aliquip graviterque aut laborum duis velit 
                   laboris sunt</p>
           </div>
       </div>
       <div class="top_card top_card_hotel">
           <div class="top_card_thumbnail">
               <img src="img/top_card_hotel.jpg" alt="picture of a hotel bed" title="picture of a hotel bed">
           </div>
           <div class="top_card_text">
               <h2>Hotels</h2>
               <p>Ubi an irure multos illum, in eram aliquip graviterque aut laborum duis velit 
                   laboris sunt</p>
           </div>
       </div>
       <div class="top_card top_card_active">
           <div class="top_card_thumbnail">
              <img src="img/noah-silliman-107988.jpg" alt="picture of a woman on a swing" title="picture of a woman on a swing">
           </div>
           <div class="top_card_text">
               <h2>Activities</h2>
               <p>Ubi an irure multos illum, in eram aliquip graviterque aut laborum duis velit 
                   laboris sunt</p>
           </div>
       </div>
    </section> <!--end of top card section-->

    <section id="most_popular_section">
       <hgroup>
            <h2 class="adventure_heading section_heading">The Adventure starts now</h2>
            <h3 class="adventure_tag section_tag">Esse do laborum iis noster si noster eu excepteur. Et nulla summis hic officia Et</h3>
        </hgroup>
        <h2 class="most_popular_heading">Most Popular</h2>
        <div class="img_container"> <!-- top level image container START-->
        <div class="main-img"> <!--Main image -->
            <div class="overlay"> <!--overlay div -->
                <h3 class="ggow_art_school most_pop_headers">Glasgow Art School</h3>
                <a href="#" class="ggow_link pop_info_link">More info</a>
            </div>
        </div>


    <div class="stacked-div"> <!--stacked img container -->
        <div class="top-img"> <!--top image -->
            <div class="overlay">
                <h3 class="sci_mus most_pop_headers">Glasgow Science Museum</h3>
                <a href="#" class="sci_link pop_info_link">More info</a>
            </div> <!--overlay -->
        </div>
        <div class="bottom-img"> <!--bottom image -->
            <div class="overlay">
                <h3 class="riverSide most_pop_headers">Riverside</h3>
                <a href="#" class="river_link pop_info_link">More info</a>
            </div> <!--overlay -->
        </div>
    </div>
</div>
</section>
<section class="active_section">
    <h2>Activities</h2>
</section>
</div>
</body>
</html>

BASE.CSS

* {
  box-sizing: border-box; }

h1 {
  color: aqua; }

@font-face {
  font-family: 'Raleway', sans-serif;
  src: url("https://fonts.googleapis.com/css?family=Raleway"); }
@font-face {
  font-family: 'Montserrat', sans-serif;
  src: url("https://fonts.googleapis.com/css?family=Montserrat:400,700"); }

MAIN.CSS

* {
  box-sizing: border-box; }

html,
body {
  height: 100%; }

@font-face {
  font-family: 'Raleway', sans-serif;
  src: url("https://fonts.googleapis.com/css?family=Raleway"); }
@font-face {
  font-family: 'Montserrat', sans-serif;
  src: url("https://fonts.googleapis.com/css?family=Montserrat:400,700"); }
#container {
  max-width: 1400px;
  margin: 0 auto; }

ul,
ol {
  list-style: none; }

a {
  text-decoration: none;
  color: #fff;
  display: block;
  padding: 10px; }
  a:hover {
    cursor: pointer; }

.logo_span {
  font-weight: 100; }

img {
  display: block; }

h1,
h2,
h3,
h4 {
  font-family: "Montserrat", sans-serif; }

h3 {
  font-size: 1em; }

.section_tag,
.section_heading {
  text-align: center;
  color: #d36d92; }

.section_heading {
  font-size: 2em; }

.section_tag {
  font-family: "Raleway", sans-serif; }

.wrapper {
  width: 80%;
  margin: 0 auto; }

@media screen and (min-width: 319px) {
  #main_header {
    width: 100%;
    height: calc(100vh + 2em);
    padding-bottom: 3em;
    background: linear-gradient(rgba(146, 33, 166, 0.6), rgba(146, 33, 166, 0.6)), url(../img/dariusz-sankowski-56725.jpg);
    background-position: center;
    background-size: cover; }
    #main_header #main_nav {
      text-align: center;
      color: #fff; }
    #main_header #main_nav ul {
      font-family: "Raleway", sans-serif;
      padding-left: 0; }
      #main_header #main_nav ul li {
        padding: 10px;
        display: block;
        margin-top: 10px;
        background-color: rgba(255, 255, 255, 0.3);
        transition: all .4s; }
        #main_header #main_nav ul li:hover {
          background-color: rgba(255, 255, 255, 0.1); }
    #main_header .logo {
      width: 50px;
      text-align: center;
      display: inline-block;
      margin-right: 16px;
      margin-top: 16px; }
    #main_header #logo_tag {
      margin-right: auto;
      font-family: "Montserrat", sans-serif;
      display: inline-block;
      position: relative;
      bottom: 30px;
      font-size: 1.5em; }
    #main_header #header_tags {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      margin-top: 10%; }
      #main_header #header_tags h1,
      #main_header #header_tags h3 {
        font-family: 'Montserrat', sans-serif;
        color: #fff;
        text-align: center;
        font-size: 3em;
        padding: 0;
        margin: 0; }
      #main_header #header_tags h3 {
        font-weight: 100;
        font-size: 1em;
        margin-top: 1em; }
    #main_header #banner_link_div {
      display: flex;
      justify-content: center;
      margin-top: 1em;
      margin-bottom: 0; }
      #main_header #banner_link_div .banner_signup {
        color: #fff;
        background-color: rgba(255, 255, 255, 0.3);
        width: 110px;
        border-radius: 30px;
        text-align: center;
        font-family: "Montserrat", sans-serif;
        margin: 0;
        padding: 10px;
        transition: background-color .4s; }
        #main_header #banner_link_div .banner_signup:hover {
          background-color: rgba(255, 255, 255, 0.1); }
      #main_header #banner_link_div .banner_viewall {
        color: #fff;
        background-color: lightgreen;
        width: 110px;
        border-radius: 30px;
        text-align: center;
        font-family: "Montserrat", sans-serif;
        margin: 0;
        margin-left: 1em;
        padding: 10px;
        transition: background-color .4s; }
        #main_header #banner_link_div .banner_viewall:hover {
          background-color: #65be65; } }
#top_card_section {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  position: relative; }
  #top_card_section .top_card {
    background-color: #fff;
    flex-basis: 300px;
    height: 400px;
    flex-grow: 1;
    -webkit-box-shadow: -1px 6px 15px -5px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: -1px 6px 15px -5px rgba(0, 0, 0, 0.75);
    box-shadow: -1px 6px 15px -5px rgba(0, 0, 0, 0.75); }
  #top_card_section .top_card_food {
    margin-left: 0; }
  #top_card_section .top_card {
    position: relative; }
  #top_card_section .top_card_thumbnail {
    position: absolute;
    width: 100%;
    height: 200px;
    overflow: hidden; }
    #top_card_section .top_card_thumbnail img {
      width: 100%; }
  #top_card_section .top_card_text {
    position: absolute;
    width: 100%;
    top: 50%;
    color: #5c5a5a;
    text-align: center;
    padding-top: 50px;
    padding-left: 1em;
    padding-right: 1em; }
    #top_card_section .top_card_text h2 {
      width: calc(100% - 20%);
      margin: 0 auto;
      font-family: "Montserrat", sans-serif;
      font-size: 2em;
      padding-bottom: 5px;
      border-bottom: 2px solid purple; }
    #top_card_section .top_card_text p {
      font-family: "Raleway", sans-serif;
      line-height: 1.5; }

#most_popular_section hgroup {
  margin-top: 0;
  padding-top: 0;
  text-align: center;
  color: #d36d92; }
  #most_popular_section hgroup .section_heading {
    font-size: 2em; }
  #most_popular_section hgroup .section_tag {
    font-family: "Raleway", sans-serif; }
#most_popular_section .most_popular_heading {
  color: #5c5a5a;
  display: inline-block;
  padding-bottom: 5px;
  border-bottom: 2px solid purple; }
#most_popular_section .img_container,
#most_popular_section .main-img,
#most_popular_section .stacked-div,
#most_popular_section .top-img,
#most_popular_section .bottom-img {
  display: block;
  flex-basis: 100%;
  height: 300px;
  margin-bottom: 1em;
  color: #fff; }
  #most_popular_section .img_container h3,
  #most_popular_section .main-img h3,
  #most_popular_section .stacked-div h3,
  #most_popular_section .top-img h3,
  #most_popular_section .bottom-img h3 {
    font-size: 2em; }
#most_popular_section .main-img {
  background-image: url(../img/Mackintosh%20Building%20full%20facade%20-%20photocredit%20Alan%20McAteer.jpg);
  background-size: cover;
  background-position: center;
  transition: all .4s; }
#most_popular_section .top-img {
  background-image: url(../img/sci_centre.jpg);
  background-size: cover;
  background-position: center; }
#most_popular_section .bottom-img {
  background-image: url(../img/riverside_mus.png);
  background-size: cover;
  background-position: center; }

@media screen and (min-width: 670px) {
  #main_nav,
  #main_nav ul {
    display: flex; }

  #main_header {
    height: 100vh; }
    #main_header #main_nav ul {
      font-family: "Raleway", sans-serif; }
      #main_header #main_nav ul li {
        margin-right: 16px;
        background-color: transparent; }
        #main_header #main_nav ul li:hover {
          background-color: initial; }

  #main_nav a {
    color: rgba(255, 255, 255, 0.8); }
    #main_nav a:hover {
      color: white; }

  .logo {
    width: 50px;
    align-self: flex-start;
    margin: 16px 16px; }

  #logo_tag {
    margin-right: auto;
    font-family: "Montserrat", sans-serif;
    top: -5px; }

  #top_card_section {
    top: -150px; }
    #top_card_section .top_card {
      margin-left: 8px; }
    #top_card_section .top_card_food {
      margin-left: 0; }

  #most_popular_section {
    position: relative;
    top: -100px;
    width: 70%;
    margin: 0 auto; }
    #most_popular_section .img_container {
      width: 70vw;
      height: 400px;
      margin: 20px auto;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex; }
    #most_popular_section .main-img {
      width: 460px;
      max-width: 460px;
      height: 100%;
      margin-right: 10px;
      background-image: url(../img/Mackintosh%20Building%20full%20facade%20-%20photocredit%20Alan%20McAteer.jpg);
      background-size: cover;
      background-position: center;
      transition: all .4s; }
    #most_popular_section .stacked-div {
      width: 50%;
      height: 100%; }
    #most_popular_section .overlay {
      background-color: rgba(0, 0, 0, 0.3);
      width: 100%;
      height: 100%;
      opacity: 0;
      -webkit-transition: all .4s;
      transition: all .4s;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      flex-direction: column;
      -webkit-box-pack: center;
      -ms-flex-pack: center;
      justify-content: center;
      -webkit-box-align: center;
      -ms-flex-align: center;
      align-items: center; }
    #most_popular_section .main-img:hover .overlay,
    #most_popular_section .top-img:hover .overlay,
    #most_popular_section .bottom-img:hover .overlay {
      opacity: 1; }
    #most_popular_section .top-img {
      background-image: url(../img/sci_centre.jpg);
      background-size: cover;
      background-position: center; }
    #most_popular_section .bottom-img {
      background-image: url(../img/riverside_mus.png);
      background-size: cover;
      background-position: center; }
    #most_popular_section .top-img,
    #most_popular_section .bottom-img {
      width: 100%;
      height: calc(50% - 5px);
      transition: all .4s; }
    #most_popular_section .top-img {
      margin-bottom: 10px; }
    #most_popular_section .most_pop_headers {
      color: #fff;
      font-size: 1.5em; }
    #most_popular_section .pop_info_link {
      width: 110px;
      border: 2px solid white;
      border-radius: 30px;
      padding: 10px;
      text-align: center;
      font-family: "Raleway", sans-serif;
      transition: all .4s; }
      #most_popular_section .pop_info_link:hover {
        background-color: #fff;
        color: #5c5a5a; }
    #most_popular_section section_heading {
      margin-bottom: 10px; } }

/*# sourceMappingURL=main.css.map */

1 Answer

izzy goldman
izzy goldman
12,542 Points
izzy goldman
izzy goldman
12,542 Points

its because of parents of floated elements are collapsing! add this to your css: #imost_popular_section{overflow:auto;}

see https://css-tricks.com/all-about-floats/