Hello, I am having a problem while developing my page according to responsive web design. The problem is that there is no problem when I adjust the page for small screens, but when I edit the image on horizontal screens, the codes are also affecting the basic image for computers.

@media only screen and (orientation: landscape) { nav a { font-size: 0.85rem; line-height: 2rem; width: 20%; } .scroller:after { content: ""; } h2 { font-size: xx-large; } nav:after { background: linear-gradient( 90deg, var(--sect1) 0 calc(20vw - 3px), var(--sect2) 0 calc(40vw - 3px), var(--sect3) 0 calc(60vw - 3px), var(--sect4) 0 calc(80vw - 3px), var(--sect5) 0 150vw ); } section { height: 125vh; } }

You can see the code that explodes the system above.

@media only screen and (max-width: 580px) and (orientation: landscape)

Like the code above , The error persists when I combine the small screen and landscape screen codes.

Original Photo: (The above line of code is not added / Font sizes are normal )

Code Add Photo : ( The above line of code is added / Font sizes are small )

If you want to review or correct it, the codes are available as comments in the css file.