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 Alex Chow
Alex Chow
4,521 Points

Media Query Question

I'm new to web development and I'm working on a responsive portfolio site. When a user clicks on a thumbnail, it will open a modal window to view the larger image size. My goal is to have the heights of the modal window change depending on the screen width using media queries.

I've created the following three queries: 

@media (max-width: 2560px) {
    .reveal-modal {
        height: 900px;
        top: 50%;
        margin-top: -450px;
    }
}

@media (max-width: 1441px) {
    .reveal-modal {
        height: 600px;
        top: 50%;
        margin-top: -300px;
    }
}

@media (max-width: 1281px) {
    .reveal-modal {
        height: 560px;
        top: 50%;
        margin-top: -280px;
    }
}

I notice that when I view it on a 1440px width screen the height of the window is 900px not 600px. I wanted to know how to remedy this problem.

1 Answer

Jonathan Grieve
MOD
Jonathan Grieve
Treehouse Moderator 91,254 Points
Jonathan Grieve
Jonathan Grieve
Treehouse Moderator 91,254 Points

The code looks kosher to me as far as the CSS is concerned.

I wonder if you bring up the page in Chrome Dev Tools you're seeing the total height inclusive of the applied margin, but I can't seem to test that in a codepen. Could you post your HTML took? :)

Alex Chow
Alex Chow
4,521 Points

Hey Jonathan,

I found the mistake I made. I was missing something on my side. Thanks for your help!