My Website act different on links

Hi guys. I am learning HTML and CSS. I’m trying to create simple website and start to learn @media queries. I applied same style on all my 4 links: Home, CSS Video, HTML Video, and Contact. But Contact and HTML Videos when you shrink page behave in one way, CSS Video and Home behave not like I want.
And one more thing. grid-template-rows: minmax(65px, auto) 1fr 50px;
‘minmax’ if I use comma between 65px and auto sometimes behaves better in one situation, sometimes worst. I can not unerstand.
Can anybody help me? Try to shrink and expand page and you will see difference.
Thank you
http://sigitas.epizy.com/index.html

Looking at your CSS code, I assume you’re trying to change the styles based on Screen Size.

The issue here is that you haven’t fully completed the @media query. To change elements based on Device Screen, then you need a query like this:

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

}
4 Likes

If you intend auto to be the maximum, then you must use the comma. auto as a maximum behaves just like max-content.

2 Likes

Problem is, when I put comma @media code doesn’t work how I want. Just when I remove comma, my Web page starts behave exactly like I want. But what is most weird, two links behave one way, another two another way. But style same for all four?

Thanks. I knew it, but I’ve read explanation that if you not describe ‘screen’ @media by default works for everything not just screen. Am I right? :roll_eyes:

I have worked a bit in grid CSS, but most of my knowledge comes from consulting the docs at mozilla. So if you want more info and examples on how it works, head over there.
And yes, if you don’t include that, it will imply the ‘all’ for the @media.

4 Likes