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 mrx3
mrx3
8,742 Points

I'm having some trouble with my @media queries (codepen included).

I've been practicing my media queries, and I'm new at using them...this is actually my second time. The first question I have is, in my codepen on line 32 of my CSS I had the following set to .wrapper {max-width: 70%; }. Then I setup the media query as follows: 

@media (max-width: 480px) {
  .wrapper {
    width: 100%;
  }
}

For some reason, I had to change the wrapper max-width to 960px; because leaving it a percent the media query does not work. I can't seem to figure out why. Could be because I already set the max-width in the wrapper to 70% , and that has more specificity over the media query. If you change value in my code pen to 70% you can see what happens when you adjust the browser down to 480 pixels. Would it be okay if I left the max-width at 960px ?

my next and last question is about my media query setting for when the screen gets to 768px wide. I have a box that was floated right with headline "Our Customers", inside is various links to other websites. The CSS start on line 319-325, and looks like this:

.floatRight {
  float: none;
  width: 100%;
}
.floatRight a {
  display: inline;
  padding-left: 2.2rem;
}

The box that contains the links grows, which is great. But the links inside do not stay centered in the page like the headline does, and that's why I added the left padding to the .floatRight a selector. Is there anyway to have the links stay centered as the box grows to it's full width with CSS? I'm sure there is a jQuery plugin, but I don't know jQuery at all. I've tried setting the a max-width to the .floatRight class, but that doesn't work at all. Any help with two questions would really appreciated. Thank you in advance for taking the time to help me. CodePen http://codepen.io/mike316/pen/zxaJRZ

Robert Richey
Robert Richey
Courses Plus Student 16,352 Points

Hi there,

Fixed markdown for the posted code. If you're curious about how to add markdown like this on your own, checkout this thread on posting code to the forum . Also, there is a link at the bottom called Markdown Cheatsheet that gives a brief overview of how to add markdown to your posts.

While you had the triple backticks, it was missing the css language specifier.

Cheers!

1 Answer

rydavim
rydavim
18,814 Points

A percentage can't be used for a media query because that is not a static value. So it doesn't know what you mean 70% of. Since if your window is 1000px wide, then 70% would be 700px. But if your window is a different size, then 70% will also be a different size. Maybe there is a different way to achieve the effect you're looking for?

As for the text links - does adding a text alignment of center to your float right fix your issues? I'm not entirely sure if that was the problem you were talking about.

.floatRight {
   float: none;
   width: 100%;
   text-align: center;
  }
mrx3
mrx3
8,742 Points

I did try text align center but it didn't work for me. Thank you for the reply.

rydavim
rydavim
18,814 Points

Hmm, can I ask what browser you're using? Your links appear centered for me at all media break points.

mrx3
mrx3
8,742 Points

Chrome, internet explorer, and fire fox. I test my practice sites in all three

mrx3
mrx3
8,742 Points

I rechecked it, I had text align spelled wrong. I changed it and it works. Thank you so much for your help. I will select the best answer now. Thanks again for the answer you helped me big time!!!!!

rydavim
rydavim
18,814 Points

Wonderful, glad it worked out. Typos can be super hard to find in your own code.