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 Matthew Samson
Matthew Samson
4,109 Points

Responsive web design: Implementing media queries

Hi guys,

I have been following along with the tutorials to make my website responsive, however I'm having trouble with the media queries section.

It seems I can implement the media queries but I don't quite understand how to reposition the elements in my layout to accommodate the different browser sizes.

I have tried using the commands shown in the video such as specifying widths as percentages but the elements just seem to stay in the same place.

Ps. I have not been designing the Smells Like Bakin' site, I have been trying to implement the same techniques but onto my own design. I have used Blueprints stylesheet for my grid structure.

Thanks

Matt

3 Answers

Guil Hernandez
STAFF
Guil Hernandez
Treehouse Teacher
Guil Hernandez
Guil Hernandez
Treehouse Teacher

Hi Matt,

Can you please post a link to your website, or create a code example on Codepen?

Matthew Samson
Matthew Samson
4,109 Points
Matthew Samson
Matthew Samson
4,109 Points

Hi Guil,

Sorry am new to Codepen, is this the link you would need....

http://codepen.io/msamson87/full/qCGIy

As you can see the site is fairly basic (am just a beginner) I plan to add more images so finding out how I could shuffle things round would be really handy.

Thanks again

James Barnett
James Barnett
39,199 Points
James Barnett
James Barnett
39,199 Points

I noticed you posted 350 lines of CSS for a page that shows 4 images, that's an impenetrable morass of code.

When posting on a volunteer forum, I'd suggest instead you trim that down to a reduced test case and only post the code you suspect might be the issue.

Additionally organizing your CSS by section and formatting it to make it more readable would make your code much easier to troubleshoot. Here are some great tips, on how to create maintainable code with a CSS styleguide

I noticed most of that code are CSS framework classes, which lead to very unreadable and non-semantic markup.

Please Stop Embedding Bootstrap Classes in Your HTML is a great blog post on how to use an HTML pre-processor (like LESS or SASS) for a much easier to read markup.