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

Sebastian de Rementeria
Sebastian de Rementeria
2,386 Points
Posted by Sebastian de Rementeria
Sebastian de Rementeria
2,386 Points

Help with Lake Tahoe project for mobile devices

This might be a long shot, did the project looks great but when I test the view port for mobile devices it looks a mess. Any help would be great! Here are the media queries:

/Media queries/

@media (max-width: 1024px){ .primary-content, .secondary-content { width:90px; }

.wildlife{ padding: 10% 12%; margin: 50px 0 20px; }

}

@media (max-width: 768px){ .primary-content, .secondary-content { width:100%; padding: 20px; border-top: none; }

.main-header{ max-height:380px; padding: 50px 25px 0; }

.title { font-size: 1.3rem; border:none; }

h1 { font-size: 5rem; line-height:1.1; } .arrow{ display: none; } .intro{ font-size: 1rem; } .resorts, .tips{ float: none; width: 100%; } .main-footer{ padding:20px; }

3 Answers

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Sebastian,

The main question on my mind is have you included your viewport meta tag? If you're trying to view changes in an actual mobile device then this won't show up unless you force your browser to render them in non desktop browsers.

I'd need to see all your code in a website or workspace snapshot but if it's not a case of needing the viewport tag you mat need to make some further breakpoints. Breakpoints are just that, they are media queries set up at points in the screen or viewport with where your design starts to "break", or not look good to the eye. These can normally be fixed with just a few lines of CSS.

Sebastian de Rementeria
Sebastian de Rementeria
2,386 Points
Sebastian de Rementeria
Sebastian de Rementeria
2,386 Points

Hi Johnathan,

Thanks for your response. Yes, I have added the meta tag in the head. It's strange as in Crome it looks fine on my Laptop on full size and when the browser is at a thin width it applies the changes to the texts and the floats but somewhere in the middle it looks weird and when I test in Dev tools it also looks a mess. Here are the CSS and HTML:

/* Base Styles -------------------- */

* {
  box-sizing: border-box;
}

body {
  color: #878787;
  margin: 0;
  font: 1em/1.5 "Helvetica Neue", Helvetica, Arial, sans-serif;
}

h1 {  
  font-size: 5.625rem; /* 90px/16px  */
  color: rgba(255, 255, 255, 1);
  text-transform: uppercase;
  font-weight: normal;
  line-height: 1.3; 
  text-shadow: 0 1px 1px rgba(0,0,0,.8);
}

h2 {
  font-size: 3.3125em; /* 53px/16px  */
  font-weight: normal;
  line-height: 1.1;
  margin: 0 0 .5em; /* 0 0 26px */
}

h3 {
  font-size: 1.25em; /* 20px/16px  */
  color: #48525c;
  line-height: 1.2;
  margin-bottom: 1.7em; /* 34px */
}

img {
  max-width: 100%;
  margin-bottom: 20px;
  border-radius: 10px;
}

ul,
ol {
  margin: 30px 0;
}

li {
  margin-bottom: 10px;
}

/* Pseudo-classes ------------------ */

a:link {
  color: rgb(255, 169, 73);
  text-decoration: none;
}

a:visited {
  color: lightblue;
}

a:hover {
  color: rgba(255, 169, 73, .4);
}

a:active {
  color: lightcoral;
}

/* Main Styles --------------------- */

.main-header {
  padding-top: 170px;
  height: 850px;
  background: linear-gradient(#ffa949, transparent 90%),
              linear-gradient(0deg, #fff, transparent),
              #ffa949 url('../img/mountains.jpg') no-repeat center;
  background-size: cover;
}

.title {
  color: white;
  font-size: 1.625rem; /* 26px/16px */
  text-decoration: underline;
}

.intro {
  font-size: 1.25em; /* 20px/16px */
  line-height: 1.6;  
}

.primary-content,
.main-header,
.main-footer {
  text-align: center;
}

.primary-content {
    padding-top: 25px;
  padding-bottom: 95px;
}

.secondary-content {
    padding-top: 80px;
    padding-bottom: 70px;
  border-bottom: 2px solid #dfe2e6;
}

.callout {
  font-size: 1.25em;
  border-bottom: 3px solid;
  padding: 0 9px 3px;
  margin-top: 20px;
  display: inline-block;
}

.main-footer {
  padding-top: 60px;
  padding-bottom: 60px;
  border-bottom: 10px solid #ffa949;
}

.t-border {
  border-top: 2px solid #dfe2e6;
}

/* Layout Styles ------------------ */

.primary-content, 
.secondary-content {
  width: 75%;
  padding-left: 50px;
  padding-right: 50px;
  margin: auto;
  max-width: 960px;
}

.wildlife {
  color: white;
  text-align: left;
  padding: 18% 24%;
  border-top: 10px solid #ffa949;
  margin: 105px 0 60px;
  background: #434a52 url('../img/bear.jpg') no-repeat center;
  background-size: cover;
  box-shadow: inset 0 0 50px 10px rgba(0,0,0, .8);
  border-radius: 10px;
}

.arrow {
  width: 50px;
}

/* Floated Columns ------------------ */

.resorts,
.tips {
  width: 46.5%;
}

.tips {
  float: left;
}

.resorts {
  float: right;
}

/* Float Clearfix ------------------ */

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

/*Media queries*/

@media (max-width: 1024px){
 .primary-content,
 .secondary-content {
  width:90px;
}

.wildlife{
  padding: 10% 12%;
  margin:50px 0 20px;
}

} 

@media (max-width: 768px){
.primary-content,
.secondary-content {
    width:100%;
    padding: 20px;
    border-top: none;
}


  .main-header{
    max-height:380px;
      padding: 50px 25px 0;
  }

  .title {
    font-size: 1.3rem;
    border:none;
  }

  h1 {
  font-size: 5rem;
    line-height:1.1;
  }

.arrow{
  display: none;
  }

.intro{
  font-size: 1rem;
}

.resorts,
.tips{
  float: none;
  width: 100%;
}

.main-footer{
padding:20px;
}

------------------------------HTML------------------------------
<!DOCTYPE html>
<html>
  <head>
    <title>Lake Tahoe</title>
    <link rel="stylesheet" href="css/style.css">
    <meta name="viewpoint" content="width-device-width">
  </head>
  <body> 
    <header id="top" class="main-header">
      <span class="title">Journey Through the Sierra Nevada Mountains</span>
      <h1>Lake Tahoe, California</h1>
      <img class="arrow" src="img/arrow.svg" alt="Down arrow">
    </header>

        <div class="primary-content t-border">
            <p class="intro">
                Lake Tahoe is one of the most breathtaking attractions located in California. It's home to a number of ski resorts, summer outdoor recreation, and tourist attractions. Snow and skiing are a significant part of the area's reputation.
            </p>
            <a class="callout" href="#more">Find out more</a>

      <div class="wildlife">
        <h2>Check out all the Wildlife</h2>
        <p>
          As spawning season approaches, the fish acquire a humpback and protuberant jaw. After spawning, they die and their carcasses provide a feast for gatherings of <a href="#mink">mink</a>, <a href="#bears">bears</a>, and <a href="#eagles">bald eagles</a>.
        </p>
      </div><!-- End .wildlife -->

            <a class="callout" href="#wildlife">See the Wildlife</a>
        </div><!-- End .primary-content -->

        <div class="secondary-content t-border group"> 
      <div class="resorts">
        <img src="img/resort.jpg" alt="Resort">
        <h3>From Tents to Resorts</h3>
        <p>
          Lake Tahoe is full of wonderful places to stay. You have the ability to sleep in the outdoors in a tent, or relax like a king at a five star resort. Here are our top three resorts:
        </p>
        <ul>
          <li><a href="#hotels">Lake Tahoe Resort Hotel</a></li>
          <li><a href="#resorts">South Lake Tahoe Resorts</a></li>
          <li><a href="#lodging">Tahoe Ski Resort Lodging</a></li>
        </ul>       
      </div>

      <div class="tips">
        <img src="img/mtn-landscape.jpg" alt="Mountain Landscape">
        <h3>Pack Accordingly</h3>
        <p>
          One of most important things when it comes to traveling through the great outdoors is packing accordingly. Here are a few tips:
        </p>
        <ol>
          <li>Bring layers of clothing</li>
          <li>Pack sunscreen</li>
          <li>Carry extra water just in case</li>
          <li>Pack light</li>
        </ol>
      </div>
        </div><!-- End .secondary-content -->

        <footer class="main-footer">
            <p>All rights reserved to the state of <a href="#">California</a>.</p>
            <a href="#top">Back to top &raquo;</a>
        </footer>
  </body>
</html>
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,253 Points

Hi Sebastian,

First of all I edited your post to add some formatting for code so we can read it better. If you want to see how I did it have a look at the Markdown Cheatsheet on this page. It's very useful for formatting your posts.

Having looked closer at your code the first thing we should try is adding a final curly brace to your CSS. This would be for your max-width: 768px breakpoint. This doesn't seem to be closed properly which might just be what is giving the browser some trouble.

If that doesn't work try adding a third break point. Test your browser at different widths to see which exact breakpoint is causing the problem. Test it in Chrome DevTools if you prefer.

Good luck! )

Sebastian de Rementeria
Sebastian de Rementeria
2,386 Points
Sebastian de Rementeria
Sebastian de Rementeria
2,386 Points

Thanks Johnathan, you're right it wasn't closed properly. It now looks fine at 1024 but totally messed up at anything under..