Learn CSS Flexbox by Building a Photo Gallery Step 20

HTML-CSS
1

{Create a media query for screens smaller than 800px in width. In that media query, create a #gallery img rule and set the width property to 50% . This will convert your gallery to a two-column layout.}
#gallery img {
@media (max-width: 800px)
@media (width: 50%)
}
can someone help me with this?

2

you must give us something you have already do

3

Hi @ MohdHamidAli, and welcome to the forum!

The #gallery img rule should be inside the media query.
There are some helpful examples in this FCC article:

Just for future reference - when you want to post a question in the forum, you can do that by clicking the Ask for Help button located on the challenge.
That will create a new topic with all your code and it also includes a link to the challenge.
You’ll still be able to ask your question in the post before submitting it to the forum.

4

Your opening should be the @media (max-width: 800px) { instead of your #galley img {. After that on next line you need to insert #gallery img{, to target the width: 50% you also need to remember to close both with the }}.
@media(max-width: 800px) {
#gallery img{
width: 50%;
}
}
I hope that made sense… I kind of suck at explaining things…

5

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.