I have separate ranges for smartphones/tablets/ipads and i have setting for them like 100px width to 500px width , 501px width to 1000px width and so on using a variable .is-smartphone.
and i have no issue with that i am trying to make my web styles on laptops and computers . I have setting for exact screens that are mostly used that i will give below. But still for browser other other screens there should be default styles so i decided to use a big range like "max: 2500px" or "min-width: 100px" but these "max: 2500px" or "min-width: 100px" are applying on exact ranges that it should not. below are my current ranges in which i need to add "max: 2500px" or "min-width: 100px"
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 800px) and (max-width: 800px) and (min-height: 465px) and (max-height: 465px) { /* laptop screen ( L/P ) --- (laptop 800 * 600 ) --- ---- (actual 800 * 465 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (min-height: 633px) and (max-height: 633px) { /* laptop screen ( L/P ) --- (laptop 1024 * 768 ) --- ---- (actual 1024 * 633 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1280px) and (max-width: 1280px) and (min-height: 585px) and (max-height: 585px) { /* laptop screen ( L/P ) --- (laptop 1280 * 720 ) --- ---- (actual 1280 * 585 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1280px) and (max-width: 1280px) and (min-height: 633px) and (max-height: 633px) { /* laptop screen ( L/P ) --- (laptop 1280 * 768 ) --- ---- (actual 1280 * 633 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media (min-width: 1280px) and (max-width: 1280px) and (min-height: 665px) and (max-height: 665px) { /* laptop screen ( L/P ) --- (laptop 1280 * 800 ) --- ---- (actual 1280 * 665 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1024px) and (max-width: 1024px) and (min-height: 685px) and (max-height: 686px) { /* laptop screen ( L/P ) --- (laptop 1280 * 1024 ) --- ---- (actual 1024 * 686 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1360px) and (max-width: 1360px) and (min-height: 633px) and (max-height: 633px) { /* laptop screen ( L/P ) --- (laptop 1360 * 768 ) --- ---- (actual 1360 * 633 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1366px) and (max-width: 1366px) and (min-height: 633px) and (max-height: 633px) { /* laptop screen ( L/P ) --- (laptop 1366 * 768 ) --- ---- (actual 1366 * 633 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1120px) and (max-width: 1120px) and (min-height: 705px) and (max-height: 706px) { /* laptop screen ( L/P ) --- (laptop 1400 * 1050 ) --- ---- (actual 1120 * 705 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1440px) and (max-width: 1440px) and (min-height: 765px) and (max-height: 765px) { /* laptop screen ( L/P ) --- (laptop 1440 * 900 ) --- ---- (actual 1440 * 765 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1600px) and (max-width: 1600px) and (min-height: 765px) and (max-height: 765px) { /* laptop screen ( L/P ) --- (laptop 1600 * 900 ) --- ---- (actual 1600 * 765 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1344px) and (max-width: 1344px) and (min-height: 705px) and (max-height: 706px) { /* laptop screen ( L/P ) --- (laptop 1680 * 1050 ) --- ---- (actual 1344 * 705 ) --- */
} /* laptop screen ( L/P ) ending */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////
///////////////////////////////////////////////////////laptop screen ( L/P ) starting///////////////////////////////////////////////////////
@media only screen and (min-width: 1536px) and (max-width: 1536px) and (min-height: 729px) and (max-height: 730px) { /* laptop screen ( L/P ) starting --- (laptop 1920 * 1080 ) --- ---- (actual 1536 * 730 ) --- */
} /* laptop screen ( L/P ) starting */
///////////////////////////////////////////////////////laptop screen ( L/P ) ending///////////////////////////////////////////////////////