Tsunami-coffee project help

When you ask a question, don’t forget to include a link to the exercise or project you’re dealing with!

If you want to have the best chances of getting a useful answer quickly, make sure you follow our guidelines about how to ask a good question. That way you’ll be helping everyone – helping people to answer your question and helping others who are stuck to find the question and answer! :slight_smile:

Hello, I am having a problem with the Tsunami coffee project on itermediate CSS. In the media queries, I need to change the gallery images to a width of 100% when the screen is 470 pixels of less and it isn’t working for me. If anyone can help please and thank you.

@media only screen and (max-width: 450px) {
.rating h1 {
font-size: 2rem;
.gallery img {
margin: 0;
width: 100%;

<-// This is the code that I don’t understand why it’s not running. At a smaller screen the 3 images still appear on the same line, when I want them to appear on their own line and cover the smaller screen.

Your @media looks good to me. In your HTML file, do you have anything between your div class=“gallery” and IMG? I know its lengthy, but provide all your html and css code and see if we can find the issue.

1 Like

Hi, there!

Question for you. Should your media queries be at the top or bottom of your CSS? :eyes:


Hi there Ms Kirataviewd,
Wow, I moved my media queries down to the bottom of the CSS file and like magic the images did what they were suppose to. Thank you very much, I will most definalty keep my future media queries at the bottom of the CSS file.

1 Like

Hi there Mr. RobertfoleyIII, I was able to solve the issued by moving the media queries to the bottom of the page, not 100% sure how or why but the issue was resolved. I thank you very much for taking the time to offer help.

1 Like

Code is read top to bottom in a browser (this concept is even more important in javascript) so your media query was replaced by .gallery img, not in the media query, underneath it.

1 Like