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? 
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
This topic was automatically closed 15 days after the last reply. New replies are no longer allowed.