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

Ashley Dillon
Ashley Dillon
9,092 Points
Posted by Ashley Dillon
Ashley Dillon
9,092 Points

Media Queries- Mobile layout

Hi, I am trying to span each of the following three images as full width in mobile layout. They are just shrinking and not spanning the full width at 480 px. Here's my HTML: <div id="projects"> <div id="recent-project" class="grid_4"> <h2>Web Designs</h2> <img src="img/mac.png" alt="Recent Project" width="250px"> </div>

<div id="Paper" class="grid_4">
  <h2>Paper Designs</h2>
  <img src="img/Italy.png" alt="Recent Project" width="200px" height="200px">
</div>

<div id="logo" class="grid_4 omega">
  <h2>Logo Designs<h2>
  <img src="img/Italy.png" alt="Recent Project" width="200px" height="200px">

</div>
</div>

And CSS:

@media screen and (max-width: 480px){

.grid_1,
.grid_2,
.grid_3,
.grid_4,
.grid_5,
.grid_6,
.grid_7,
.grid_8,
.grid_9,
.grid_10,
.grid_11,
.grid_12 {
    width:100%;

}}

.recent-project {
    width: 100%;

}
.paper {
    width: 100%;
}
.logo{
    width: 100%;

}
.social-media {
    display: none;
}

I have my container set as such: .container{ width: 100%; max-width: auto; margin: auto; } And I think this has something to do with it, but i'm not sure?

Any help is much appreciated.

3 Answers

Sean T. Unwin
Sean T. Unwin
28,690 Points
Sean T. Unwin
Sean T. Unwin
28,690 Points

You have id's in the divs whereas in the CSS you have class declarations. Furthermore, in the HTML the id for the first div is capitalized ("Paper") while in the CSS it is lower-case. I recommend being consistent with your naming conventions.

This is an example you could use as a starting point (assuming the id, 'Paper', is changed to 'paper') inside the @media screen and (max-width: 480px) rule:

        #paper img, #logo img {
            width: 100%;
        }

Be aware that raster images may get distorted so you may want to use an alternate method. I recommend checking Flexible Images Part Two: Raster Images as part of the Build a Responsive Website track.

Ashley Dillon
Ashley Dillon
9,092 Points
Ashley Dillon
Ashley Dillon
9,092 Points

Thanks! I think that did the trick!

Ashley Dillon
Ashley Dillon
9,092 Points
Ashley Dillon
Ashley Dillon
9,092 Points

Thanks! I think that did the trick!

Dennis Skoko
Dennis Skoko
12,860 Points
Dennis Skoko
Dennis Skoko
12,860 Points

Try removing auto on max-width because auto can not be a value for that. It could also be because you are giving the images a fixed width in HTML so try removing them if it still doesn't work.

You can also check the problem here HTML Validator and CSS Validator.

Ashley Dillon
Ashley Dillon
9,092 Points
Ashley Dillon
Ashley Dillon
9,092 Points

I changed the max-width to a 1000px and removed the fixed widths in the html, but still no luck:(

Dennis Skoko
Dennis Skoko
12,860 Points
Dennis Skoko
Dennis Skoko
12,860 Points

My last guess will be that you also need to give a width: 100%; on your images in CSS. Sorry if I'm not too helpful =)

Regards, Dennis

Dennis Skoko
Dennis Skoko
12,860 Points
Dennis Skoko
Dennis Skoko
12,860 Points

Also noticed that you forgot to close your second h2 tag.