Why isn't my @media query overriding the standard css

Get Help CSS
#1

Hi,

Currently I am working on the Company Home page project. I am doing this project on my own computer. I have made a very beautiful bakery website, which looks very nice on a large screen, Now I wanted to add @media queries, but it doesn’t work.

I have copied my code into the editor on Codecademy and it seems to work there just fine (pictures aren’t showing, because I didn’t upload them.) What’s wrong with my code?

image
image1920×1020 102 KB

#2

Hello,

It looks like it is working for me though. Not sure if you’ve made changes after this post to make it work.

If you haven’t changed anything, then it might be that your max-width is too small for you to notice it kicking in. To get to 368px wide, most of your elements are already out of view so maybe you aren’t seeing the effect. When I change it to 600px, it becomes a lot more obvious, for example.

Here is your site but with a larger width for the @media query and also I set some colors just to make it obvious it’s triggering for other elements too:

media-query
media-query1209×943 579 KB

1 Like
#3

Thanks! I added (orientation: portrait) to the @media query. And now its working much better. Now I am confused about the breakpoint. I have set it to (max-width: 600px) now but everything seems to change around 930px. Why?

#4

That’s because of how you added it here:

@media only screen and (max-width: 480px), (orientation: portrait)

You used the comma to separate the rules, so it’s basically an or type condition. Essentially, you told the browser to use these rules if the orientation ever became portrait. It considers it portrait when the height is greater than or equal to the width. So around 930px is when it meets that criteria in your system. If you make the browser window shorter, you’ll see it triggers at a different width.

#5

Thank you. I have completely removed the , (orientation: portrait)

it’s now:

@media only screen and (max-width: 768px)

and it seems to work fine. So I see what you mean now. Next question: What is a good design for smaller screens and what breakpoints do I have to set?

#6

Oh no it’s not working again :frowning:

#7

‘Good design’ for smaller screens is pretty subjective. I’m sure there are a lot of ideas and best practices for it, but it’s hard to say thee is a one-size-fits-all type solution for that topic. Even the breakpoints aren’t set in stone. Here are some common breakpoints listed in an article from Freecodecamp: Media Query CSS Tutorial – Standard Resolutions, CSS Breakpoints, and Target Phone Sizes

#8

The rules are triggering at the breakpoint you set still for me:

@media only screen and (max-width: 768px)

media-query2
media-query2782×165 65.6 KB

To be clear, your rules have always worked. Even for your first post they were working, but you had such a small value for the max-width that you didn’t see.