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 Cole Smith
.a{fill-rule:evenodd;}techdegree
Cole Smith
Web Development Techdegree Student 13,802 Points

Issues with some of my margins collapsing on smaller screens

I'm having some trouble with my margins collapsing on screens smaller than 1024px, I was trying to make space between my main header and intro-unit divs but every time I change the screen size to less than 1024px the margin top values collapse. when/if you run my code you will see what I am talking about. any help would be appreciated I have tried a number of things in and out of the flex box media queries but with no success. 

/* -- Base Element Styles -- */

* {
  box-sizing: border-box;
}
body {
  font-family: Verdana, Geneva, Tahoma, sans-serif;
  background-color:peachpuff;
  margin: 0;
}
ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
h1 {
  color: lightslategray;
}
h2 {
  color: lightslategray;
}
h3,
a {
  color: lightslategrey;
}
a {
  text-decoration: none;
}
p {
  padding: 8px;
  padding-top: 15px;
  font-weight: 500;
}
.unit .p {
  font-weight: 500;
}
/* -- Base Layout Styles -- */
.main-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color:lightsalmon;
  padding: 15px 15px 15px 15px;
}
main {
  margin-top: 3rem;
}
.name {
  font-size: 1.35em;
  text-align: center;
  margin: 0;
}
.intro-title {
  text-align: center;
  padding-top: 14px;
  padding-bottom: 8px;
}
.main-nav {
  margin-top: 5px;
}
.nav-link{
  text-align: center;
}
.main-nav a {
  text-align: center;
  line-height: 2em;
  padding: 15px 15px 15px 15px;
}
.nav-link {
  font-weight: 700;
}
.container {
  text-align: center;
  padding-left: 25px;
  padding-right: 25px;
}
.container-2 {
  text-align: center;
  padding-left: 25px;
  padding-right: 25px;  
}
.logo {
  padding: 5px 5px 5px 5px;
}
/* -- Layout Containers -- */
h1 a {
  padding: 0px;
}
.intro-unit,
.main-footer {
  text-align: center;
}
.intro-unit {
 color:lightslategray;
 background:wheat;
 padding: 9px 9px 9px 9px;

}
.main-footer {
  color: floralwhite;
  background-color: lightsalmon;
  margin-top: 25px;
  padding: 14px 10px 11px 10px;
} 
.container {
  padding-right: 1em;
  padding-left: 1em;
}
.container-2 {
  padding-right: 1em;
  padding-left: 1em;  
}
.unit {
  padding: 10px 10px 10px 10px;
}
/* -- Media Queries -- */

@media (min-width: 768px) {
  .container,
  .container-2 {
    width: 90%;
    margin: 0 auto;
  }
  .intro-unit {
    margin: 5rem auto;
  }
}
@media (min-width: 1024px) {
  .intro-unit,
  .container,
  .container-2 {
    width: 90%;
    max-width: 1150px;

  }
  .intro-unit {
    margin-top: 5rem;
  }
}

/* -- Flex Box -- */

@media (min-width: 768px) {
  .main-header,
  .main-nav,
  .intro-unit,
  .container,
  .container-2 {
      display: flex;

  }
  .main-header {
    flex-direction: column;
    align-items: center;
    justify-content: space-around;
  }
  .intro-unit {
      flex-direction: row-reverse;
  }
  .container,
  .container-2 {
      flex-direction: column;
      justify-content: space-around;
  }
}

@media (min-width: 1024px) {
   .main-header {
       flex-direction: row;
       justify-content: space-between;
   }
   .main-nav {
     flex-direction: row;
   }
   .intro-unit {
     flex-direction: row-reverse;
   }
   .container,
   .container-2 {
       flex-direction: row;
       justify-content: space-around;
   }   
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Responsive Webpage</title>
    <link href='https://fonts.googleapis.com/css?family=Varela+Round' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="css/styles.css">
</head>
<body>
    <div class="main-header">
        <h1 class="name"><a href="#">Cole Smith</a></h1>
        <ul class="main-nav">
            <li class="nav-link"><a href="index.html">Home</a></li>
            <li class="nav-link"><a href="#portfolio">Portfolio</a></li>
            <li class="nav-link"><a href="#contact">Contact</a></li>
        </ul>
    </div>

    <header class="intro-unit">
        <img class="logo" src="img/profile-picture.svg" alt="profile picture">
        <div class="intro-text">
            <p>Hi, my name is Cole Smith I am an aspiring front/backend Web Designer! I am currently learning web design through Treehouse Tech and this is one of my projects.</p>
        </div>
    </header>

    <div class="intro-title" id="portfolio">
        <h1>Portfolio</h1>
    </div>

    <main class="container">
        <div class="unit-1 unit">
            <img src="img/marketing.svg" alt=" image representing a marketing page">
            <h2>Marketing Page</h2>
            <p>This project shows the front page of a marketing website meant for specific business i'm interested in.</p>
        </div>
        <div class="unit-2 unit">
            <img src="img/search-app.svg" alt="image representing a travel webpage design">
            <h2>Search Page</h2>
            <p>This project searches through a specific database to find information that the user is trying to look up.</p>
        </div>
        <div class="unit-3 unit">
            <img src="img/travel-app.svg" alt="image representing a favorite spot-styled webpage">
            <h2>travel app</h2>
            <p>This project compares travel times based on different transportation methods and tells you the best one.</p>
        </div>
    </main>
    <div class="container-2">
        <div class="unit-4 unit">
            <img src="img/fav-spot.svg" alt="image representing a photo gallery webpage">
            <h2>Map of Favorite Spots</h2>
            <p>This project uses mapping apis to plot points for my favorite spots in the city for a do-it-yourself walking tour.</p>
        </div>
        <div class="unit-5 unit">
            <img src="img/photo-gallery.svg" alt="image representing a calculator webpage">
            <h2>Photo Gallery</h2>
            <p>This project shows pictures from a recent trip to the viewer and allows them to easily navigate through photos.</p>
        </div>
        <div class="unit-6 unit">
            <img src="img/calculator.svg" alt="Image representing calculator-styled page">
            <h2>Calculator</h2>
            <p>Someone can enter the numbers they want and press the big blue button and get the result.</p>
        </div>
    </div> 


    <footer class="main-footer">
        <div class="footer-div">
            <h3 class="footer-title">Contact</h3>
            <p id="contact">If you're interested in chatting or want more information about what i've been working on, i'd love to hear from you!</p>
            <p>Phone: 1 (303) 4040</p>
            <p>Email: cole.smith.code@gmail.com</p>
        </div>       
    </footer>
</body>
</html>

1 Answer

Cole Smith
seal-mask
.a{fill-rule:evenodd;}techdegree
Cole Smith
Web Development Techdegree Student 13,802 Points
Cole Smith
.a{fill-rule:evenodd;}techdegree
Cole Smith
Web Development Techdegree Student 13,802 Points

If anyone was working on this, I finally figured it out so.. yeah thank you if you tried