CSS Unused CSS Stages Media Queries Adaptive Layouts with Media Queries

harry curtis
harry curtis
2,626 Points

code challenge 2 for css "adaptive layouts with media queries". a problem. think I am doing it right.

Greetings: I have actually moved on past this but it still bugs me. I cannot complete this code challenge correctly, according to the automated system, I think it may have a problem. have reviewed the lesson and gotten just slightly obsessive about this issue but cannot resolve it. would you like to try it yourself?

Hi Harry,

Can you post the code that you're trying?

harry curtis
harry curtis
2,626 Points

ok. good practice for me:

/* Phones to Tablets */

@media only screen and (min-width: 481px)  {
       .col  {
                float:  left;
       }
       .main  {
               width:  65.957446808511%;
       }
       .secondary  {
                 width:  31.914893617021%;
       }

        .secondary,
        .extra           {
                 margin-left:  2.127659574468%;  
       }
      }

/* Tablets to Desktop*/

@media only screen and (min-width:  769px)  {
         .logo  {
                float:  left;
         }
         .main-nav  {
                 float:  right;
         }
         .main  {
                 width:  40.425531914894%;
         }
          .extra  {
                  display:   block; 
                   width:  23.404255319149%;
         }
        }

which task are you stuck on?

This passes task 1 and 2 for me but I don't see anything for task 3 yet.

6 Answers

Maybe the challenge was having an issue.

I literally copied your code from here and pasted it into the challenge, overwriting the starter code, and it passed through task 2.

I would try again on a fresh challenge page.

harry curtis
harry curtis
2,626 Points

The automated system reminded me that I had to mark one answer in the form as the best one and yours was the most correct. The whole experience with that relatively simple challenge was actually a great learning experience, although a frustrating one: one that I had to leave alone for a few days as I moved on and then come back to. It was something fundamental with the pages of the challenge and to get #2 to pass I had to rewrite part of # 1 and then modify #2 by using a very literal interpretation of the challenge instructions, then I had to go back and change things to get #3 to pass....it was cool, I love working through complex little thought problems. thank you for your suggestion. harryc

harry curtis
harry curtis
2,626 Points

actually, the system would not pass that for task 2, I tried many times, many days, different permutations, re-watching the lesson etc...... maddening

harry curtis
harry curtis
2,626 Points

I will try that, thank you.

Alejandra Cuesta Monrroy
Alejandra Cuesta Monrroy
11,447 Points

Actually Harry Curtis I just copy the same code that you write and it passed great to the third stage. So yeah maybe is a problem with the page.

harry curtis
harry curtis
2,626 Points

thank you, I will go at it again, overwriting the starter page. it doesn't really matter that much, I have moved on past that point and now I have confirmation that my code is correct, I'm just a little compulsive about having all my boxes filled with a green check. thanks, harry.

@media (max-width: 1020px){
  .main-header {
    background-color: tomato;
    color: white;
  }
}

@media (max-width: 768px) {

  .h1 {
    font-size: 5rem;
  }
  .title {
    font-size: 1.4rem;
  }
}

I am so frustrated at this challenge but I don't want to give up. Can someone please review my code and tell me if it is correct? The question is:

Next, create a new media query that targets all devices when the viewport width is 768px or narrower. Inside the media query, target the .title element and set the font-size to 1.4rem. Finally, target the h1 element and set its font-size to 5rem.

Hi Raul,

The h1 is an element and not a class so you should not have a dot in front of the selector like you do with .title