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!

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 Kellen James
.a{fill-rule:evenodd;}techdegree
Kellen James
Front End Web Development Techdegree Student 1,934 Points

Image Spacing Issues - CSS Responsive Design Project (2)

Hello,

I'm having a really hard time creating the desired space between images on my three column layout - CSS Responsive Design project. I have been using the Chrome Developer Tools and can't seem to figure out the issue. I'm trying to get my layout to match that of the 1024x1690 mockup in my project files. Thanks in advance.

Sincerely,

Kellen

Kellen James
.a{fill-rule:evenodd;}techdegree
Kellen James
Front End Web Development Techdegree Student 1,934 Points

Here is my code.

https://w.trhou.se/jsol4bdmxj

3 Answers

Padraic Histon
Padraic Histon
8,460 Points
Padraic Histon
Padraic Histon
8,460 Points

Hi,

I notice that your index.html file is not linked to your responsive.css file. If this is where you have your code for your desired spacing between images then I'd say that's your problem. Add the following link below the normalize and main css links in your HTML and it should help:

<link rel="stylesheet" href="css/responsive.css">

Let me know if that helps.

Kellen James
seal-mask
.a{fill-rule:evenodd;}techdegree
Kellen James
Front End Web Development Techdegree Student 1,934 Points
Kellen James
.a{fill-rule:evenodd;}techdegree
Kellen James
Front End Web Development Techdegree Student 1,934 Points

Hi Padraic,

Thanks for pointing that out. I have the linked the css/responsive.css file and it has reformatted my images back to a single column layout. Am I supposed to have my media queries in the main.css file or responsive.css? Seems like I'm running into issues because I have media queries on both. Thanks!

Mark Wilkowske
seal-mask
MOD
.a{fill-rule:evenodd;}techdegree
Mark Wilkowske
UX Design Treehouse Moderator 17,512 Points
Mark Wilkowske
.a{fill-rule:evenodd;}techdegree
Mark Wilkowske
UX Design Treehouse Moderator 17,512 Points

You can have media queries in different css files - it just matters that you understand when they go into effect.

Some issues I notice now: +responsive.css - only one media query here has the correct syntax.

+main.css - this media query at the end: @media (min-width: 1024px) is nested inside the top query: @media (min-width: 769px)

+Should .wrap{} be inside an actual media query or not? It's just under a media query comment block now.

+There are also similar selectors between the two style sheets - #primary and .primary - which could also be confounding you.