Почему media запрос перекрывает стили под другой экран?
У меня есть css код с media запросами:
media screen and (min-width: 1440px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { } |
media screen and (min-width: 1440px) { } @media screen and (max-width: 1280px) { } @media screen and (max-width: 1024px) { }
Перед всеми этими запросами есть еще код:
.descriptionOne{ /* Новый формат. Впервые в Израиле */ position: absolute; width: 999px; height: 55px; left: 370px; top: 304px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ color: #FFFFFF; } .poragraf{ position: absolute; width: 657px; height: 225px; left: 370px; top: 307px; font-family: 'Raleway'; font-style: normal; font-weight: 700; font-size: 64px; line-height: 75px; color: #FFFFFF; } .descriptionTwo{ position: absolute; width: 633px; height: 55px; left: 370px; top: 590px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ color: #FFFFFF; } .Button{ cursor: pointer; box-sizing: border-box; position: absolute; width: 326px; height: 56px; left: 370px; top: 701px; border: 2px solid #FBB03B; filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.15)); border-radius: 30px; } .ButtonText{ /* Получить презентацию */ cursor: pointer; position: absolute; width: 218px; height: 23px; left: 413px; top: 705px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; color: #FFFFFF; } .ButtonTextTwo{ /* Vector 662 */ cursor: pointer; position: absolute; width: 6px; height: 14px; left: 647px; top: 722px; } .descriptionTree{ /* Кофейня самообслуживания UpCup */ position: absolute; width: 382px; height: 55px; left: 370px; top: 757px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ color: #FFFFFF; } .Stacan2{ /* СТАКАН 2 */ position: absolute; width: 121.59px; height: 161.32px; left: 1045.58px; top: 321.69px; filter: blur(5px); transform: rotate(-20.91deg); } .Vector{ /* Vector */ height: 595.4396419788378px; width: 592.281682963976px; left: 1170px; border-radius: 0px; position: absolute; right: 0.1%; top: 153px; bottom: 89.9%; background: rgba(22, 22, 22, 0.01); transform: rotate(42.19deg); } .CofeeAvt{ /* 5 2 */ position: absolute; width: 503.53px; height: 761.2px; left: 1114.46px; top: 141px; transform: rotate(6.6deg); } .Stacan1{ /* СТАКАН 1 */ position: absolute; width: 168.6px; height: 223.7px; left: 1560.26px; top: 456px; transform: rotate(18.85deg); } .Elipse{ /* Ellipse 999 */ position: absolute; width: 918px; height: 918px; left: 1350px; top: 496px; background: rgba(145, 94, 254, 0.4); filter: blur(300px); } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #1C1C1C; width: 480px; height: 420px; border-radius: 15px; overflow: hidden; z-index: 9999; /* добавлено для уверенности */ } .InputOne{ position: absolute; width: 473px; height: 81px; top: 70px; outline: none; border: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputTwo{ outline: none; border: none; position: absolute; width: 473px; height: 81px; top: 165px; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputThree{ position: absolute; width: 473px; height: 81px; top: 260px; border: none; outline: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .PriceButtonTextForm{ position: absolute; width: 156px; height: 23px; top: 360px; left: 155px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; cursor: pointer; color: #000000; } .PriceButtonForm{ position: absolute; width: 326px; height: 56px; left: 70px; top: 360px; cursor: pointer; background: #FBB03B; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); border-radius: 30px; } .iconsOut{ cursor: pointer; position: absolute; right: 20px; bottom: 345px; } .SendMessage{ color: chartreuse; margin-left: 150px; } |
.descriptionOne{ /* Новый формат. Впервые в Израиле */ position: absolute; width: 999px; height: 55px; left: 370px; top: 304px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ color: #FFFFFF; } .poragraf{ position: absolute; width: 657px; height: 225px; left: 370px; top: 307px; font-family: 'Raleway'; font-style: normal; font-weight: 700; font-size: 64px; line-height: 75px; color: #FFFFFF; } .descriptionTwo{ position: absolute; width: 633px; height: 55px; left: 370px; top: 590px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ color: #FFFFFF; } .Button{ cursor: pointer; box-sizing: border-box; position: absolute; width: 326px; height: 56px; left: 370px; top: 701px; border: 2px solid #FBB03B; filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.15)); border-radius: 30px; } .ButtonText{ /* Получить презентацию */ cursor: pointer; position: absolute; width: 218px; height: 23px; left: 413px; top: 705px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; color: #FFFFFF; } .ButtonTextTwo{ /* Vector 662 */ cursor: pointer; position: absolute; width: 6px; height: 14px; left: 647px; top: 722px; } .descriptionTree{ /* Кофейня самообслуживания UpCup */ position: absolute; width: 382px; height: 55px; left: 370px; top: 757px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ color: #FFFFFF; } .Stacan2{ /* СТАКАН 2 */ position: absolute; width: 121.59px; height: 161.32px; left: 1045.58px; top: 321.69px; filter: blur(5px); transform: rotate(-20.91deg); } .Vector{ /* Vector */ height: 595.4396419788378px; width: 592.281682963976px; left: 1170px; border-radius: 0px; position: absolute; right: 0.1%; top: 153px; bottom: 89.9%; background: rgba(22, 22, 22, 0.01); transform: rotate(42.19deg); } .CofeeAvt{ /* 5 2 */ position: absolute; width: 503.53px; height: 761.2px; left: 1114.46px; top: 141px; transform: rotate(6.6deg); } .Stacan1{ /* СТАКАН 1 */ position: absolute; width: 168.6px; height: 223.7px; left: 1560.26px; top: 456px; transform: rotate(18.85deg); } .Elipse{ /* Ellipse 999 */ position: absolute; width: 918px; height: 918px; left: 1350px; top: 496px; background: rgba(145, 94, 254, 0.4); filter: blur(300px); } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #1C1C1C; width: 480px; height: 420px; border-radius: 15px; overflow: hidden; z-index: 9999; /* добавлено для уверенности */ } .InputOne{ position: absolute; width: 473px; height: 81px; top: 70px; outline: none; border: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputTwo{ outline: none; border: none; position: absolute; width: 473px; height: 81px; top: 165px; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputThree{ position: absolute; width: 473px; height: 81px; top: 260px; border: none; outline: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .PriceButtonTextForm{ position: absolute; width: 156px; height: 23px; top: 360px; left: 155px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; cursor: pointer; color: #000000; } .PriceButtonForm{ position: absolute; width: 326px; height: 56px; left: 70px; top: 360px; cursor: pointer; background: #FBB03B; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); border-radius: 30px; } .iconsOut{ cursor: pointer; position: absolute; right: 20px; bottom: 345px; } .SendMessage{ color: chartreuse; margin-left: 150px; }
У меня стили (min-width: 1440px) работают хорошо, как сделать, чтобы первые стили перед этими всеми запросами работали под экран 1920x1080px c расширением 2910 1080? Я думаю, скорее всего дело в масштабе, так как у меня экран 1920x1080px и все хорошо отображается. Пример как отображается у меня:
Как у человека с 1920x1080px c расширением 2910 1080:
И если у брать все media запросы и оставить код выше, то все будет ок. Как сделать, чтобы под 1920x1080px c расширением 2910 1080 код выше отображался корректно? Весь код оставлю в комментариях из-за ограничения.
Дополнительно:
Весь код оставлю частями, 1 часть уже есть в вопросе
@media screen and (min-width: 1440px) { .descriptionOne{ /* Новый формат. Впервые в Израиле */ position: absolute; width: 378px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ height: 51px; top: 276.865234375px; left: 173.84716796875px; color: #FFFFFF; } .poragraf{ position: absolute; width: 657px; height: 225px; top: 307px; font-family: 'Raleway'; font-style: normal; font-weight: 700; font-size: 64px; line-height: 75px; left: 173.84716796875px; color: #FFFFFF; } .descriptionTwo{ position: absolute; width: 633px; height: 55px; left: 370px; top: 590px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ height: 51px; left: 173.84716796875px; color: #FFFFFF; } .Button{ cursor: pointer; box-sizing: border-box; position: absolute; width: 326px; height: 56px; left: 173.85px; top: 701px; border: 2px solid #FBB03B; filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.15)); border-radius: 30px; } .ButtonText{ /* Получить презентацию */ cursor: pointer; position: absolute; width: 218px; height: 23px; left: 211.19px; top: 705px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; color: #FFFFFF; } .ButtonTextTwo{ /* Vector 662 */ cursor: pointer; position: absolute; width: 6px; height: 14px; left: 430.12px; top: 723px; } .descriptionTree{ /* Кофейня самообслуживания UpCup */ position: absolute; width: 382px; height: 55px; left: 173.85px; top: 757px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ color: #FFFFFF; } .Stacan2{ /* СТАКАН 2 */ position: absolute; width: 121.59px; height: 161.32px; left:789.13px; top: 321.69px; filter: blur(5px); transform: rotate(-20.91deg); } .Vector{ /* Vector */ height: 495.4396419788378px; width: 499px; left: 870.7px; border-radius: 0px; position: absolute; right: 0.1%; top: 300.67px; bottom: 89.9%; background: rgba(23, 22, 22, 0.01); transform: rotate(42.19deg); } .CofeeAvt{ /* 5 2 */ position: absolute; width: 503.53px; height: 761.2px; left: 851.86px; top: 141px; transform: rotate(6.6deg); } .Stacan1{ /* СТАКАН 1 */ position: absolute; width: 168.6px; height: 223.7px; left: 1257.87px; top: 456px; transform: rotate(18.85deg); } .Elipse{ /* Ellipse 999 */ position: absolute; width: 405px; height: 836.06px; left: 1066.38px; top: 496px; background: rgba(145, 94, 254, 0.4); filter: blur(300px); } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #1C1C1C; width: 480px; height: 420px; border-radius: 15px; overflow: hidden; z-index: 9999; /* добавлено для уверенности */ } .InputOne{ position: absolute; width: 473px; height: 81px; top: 70px; outline: none; border: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputTwo{ outline: none; border: none; position: absolute; width: 473px; height: 81px; top: 165px; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputThree{ position: absolute; width: 473px; height: 81px; top: 260px; border: none; outline: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .PriceButtonTextForm{ position: absolute; width: 156px; height: 23px; top: 360px; left: 155px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; cursor: pointer; color: #000000; } .PriceButtonForm{ position: absolute; width: 326px; height: 56px; left: 70px; top: 360px; cursor: pointer; background: #FBB03B; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); border-radius: 30px; } .iconsOut{ cursor: pointer; position: absolute; right: 20px; bottom: 345px; } .SendMessage{ color: chartreuse; margin-left: 150px; } } |
@media screen and (min-width: 1440px) { .descriptionOne{ /* Новый формат. Впервые в Израиле */ position: absolute; width: 378px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ height: 51px; top: 276.865234375px; left: 173.84716796875px; color: #FFFFFF; } .poragraf{ position: absolute; width: 657px; height: 225px; top: 307px; font-family: 'Raleway'; font-style: normal; font-weight: 700; font-size: 64px; line-height: 75px; left: 173.84716796875px; color: #FFFFFF; } .descriptionTwo{ position: absolute; width: 633px; height: 55px; left: 370px; top: 590px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ height: 51px; left: 173.84716796875px; color: #FFFFFF; } .Button{ cursor: pointer; box-sizing: border-box; position: absolute; width: 326px; height: 56px; left: 173.85px; top: 701px; border: 2px solid #FBB03B; filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.15)); border-radius: 30px; } .ButtonText{ /* Получить презентацию */ cursor: pointer; position: absolute; width: 218px; height: 23px; left: 211.19px; top: 705px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; color: #FFFFFF; } .ButtonTextTwo{ /* Vector 662 */ cursor: pointer; position: absolute; width: 6px; height: 14px; left: 430.12px; top: 723px; } .descriptionTree{ /* Кофейня самообслуживания UpCup */ position: absolute; width: 382px; height: 55px; left: 173.85px; top: 757px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ color: #FFFFFF; } .Stacan2{ /* СТАКАН 2 */ position: absolute; width: 121.59px; height: 161.32px; left:789.13px; top: 321.69px; filter: blur(5px); transform: rotate(-20.91deg); } .Vector{ /* Vector */ height: 495.4396419788378px; width: 499px; left: 870.7px; border-radius: 0px; position: absolute; right: 0.1%; top: 300.67px; bottom: 89.9%; background: rgba(23, 22, 22, 0.01); transform: rotate(42.19deg); } .CofeeAvt{ /* 5 2 */ position: absolute; width: 503.53px; height: 761.2px; left: 851.86px; top: 141px; transform: rotate(6.6deg); } .Stacan1{ /* СТАКАН 1 */ position: absolute; width: 168.6px; height: 223.7px; left: 1257.87px; top: 456px; transform: rotate(18.85deg); } .Elipse{ /* Ellipse 999 */ position: absolute; width: 405px; height: 836.06px; left: 1066.38px; top: 496px; background: rgba(145, 94, 254, 0.4); filter: blur(300px); } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #1C1C1C; width: 480px; height: 420px; border-radius: 15px; overflow: hidden; z-index: 9999; /* добавлено для уверенности */ } .InputOne{ position: absolute; width: 473px; height: 81px; top: 70px; outline: none; border: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputTwo{ outline: none; border: none; position: absolute; width: 473px; height: 81px; top: 165px; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputThree{ position: absolute; width: 473px; height: 81px; top: 260px; border: none; outline: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .PriceButtonTextForm{ position: absolute; width: 156px; height: 23px; top: 360px; left: 155px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; cursor: pointer; color: #000000; } .PriceButtonForm{ position: absolute; width: 326px; height: 56px; left: 70px; top: 360px; cursor: pointer; background: #FBB03B; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); border-radius: 30px; } .iconsOut{ cursor: pointer; position: absolute; right: 20px; bottom: 345px; } .SendMessage{ color: chartreuse; margin-left: 150px; } }
@media screen and (max-width: 1280px) { .descriptionOne{ /* Новый формат. Впервые в Израиле */ position: absolute; width: 378px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ height: 51px; top: 276.865234375px; left: 89.73px; color: #FFFFFF; } .poragraf{ position: absolute; width: 657px; height: 225px; top: 307px; font-family: 'Raleway'; font-style: normal; font-weight: 700; font-size: 64px; line-height: 75px; left: 89.73px; color: #FFFFFF; } .descriptionTwo{ position: absolute; width: 633px; top: 590px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ height: 51px; left: 89.73px; color: #FFFFFF; } .Button{ cursor: pointer; box-sizing: border-box; position: absolute; width: 326px; height: 56px; left: 89.73px; top: 701px; border: 2px solid #FBB03B; filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.15)); border-radius: 30px; } .ButtonText{ /* Получить презентацию */ cursor: pointer; position: absolute; width: 218px; height: 23px; left: 128.92px; top: 705px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; color: #FFFFFF; } .ButtonTextTwo{ /* Vector 662 */ cursor: pointer; position: absolute; width: 6px; height: 14px; left: 354.5px; top: 723px; } .descriptionTree{ /* Кофейня самообслуживания UpCup */ position: absolute; width: 382px; height: 55px; left: 89.73px; top: 767px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ color: #FFFFFF; } .Stacan2{ /* СТАКАН 2 */ position: absolute; width: 121.59px; height: 161.32px; left:735.49px; top: 321.69px; filter: blur(5px); transform: rotate(-20.91deg); } .Vector{ /* Vector */ height: 495.4396419788378px; width: 420px; left: 820.22px; border-radius: 0px; position: absolute; right: 0.1%; top: 300.67px; bottom: 89.9%; background: rgba(23, 22, 22, 0.01); transform: rotate(42.19deg); } .CofeeAvt{ /* 5 2 */ position: absolute; width: 503.53px; height: 761.2px; left: 801.32px; top: 141px; transform: rotate(6.6deg); } .Stacan1{ /* СТАКАН 1 */ position: absolute; width: 120.6px; height: 223.7px; left: 1200.44px; top: 456px; transform: rotate(18.85deg); } .Elipse{ /* Ellipse 999 */ position: absolute; width: 405px; height: 836.06px; left: 850.46px; top: 496px; background: rgba(145, 94, 254, 0.4); filter: blur(300px); } .modal { position: fixed; top: 500px; left: 300px; transform: translate(-50%, -50%); background-color: #1C1C1C; width: 480px; height: 420px; border-radius: 15px; overflow: hidden; z-index: 9999; /* добавлено для уверенности */ } .InputOne{ position: absolute; width: 473px; height: 81px; top: 70px; outline: none; border: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputTwo{ outline: none; border: none; position: absolute; width: 473px; height: 81px; top: 165px; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputThree{ position: absolute; width: 473px; height: 81px; top: 260px; border: none; outline: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .PriceButtonTextForm{ position: absolute; width: 156px; height: 23px; top: 360px; left: 155px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; cursor: pointer; color: #000000; } .PriceButtonForm{ position: absolute; width: 326px; height: 56px; left: 70px; top: 360px; cursor: pointer; background: #FBB03B; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); border-radius: 30px; } .iconsOut{ cursor: pointer; position: absolute; right: 20px; bottom: 345px; } .SendMessage{ color: chartreuse; margin-left: 150px; } } |
@media screen and (max-width: 1280px) { .descriptionOne{ /* Новый формат. Впервые в Израиле */ position: absolute; width: 378px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ height: 51px; top: 276.865234375px; left: 89.73px; color: #FFFFFF; } .poragraf{ position: absolute; width: 657px; height: 225px; top: 307px; font-family: 'Raleway'; font-style: normal; font-weight: 700; font-size: 64px; line-height: 75px; left: 89.73px; color: #FFFFFF; } .descriptionTwo{ position: absolute; width: 633px; top: 590px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ height: 51px; left: 89.73px; color: #FFFFFF; } .Button{ cursor: pointer; box-sizing: border-box; position: absolute; width: 326px; height: 56px; left: 89.73px; top: 701px; border: 2px solid #FBB03B; filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.15)); border-radius: 30px; } .ButtonText{ /* Получить презентацию */ cursor: pointer; position: absolute; width: 218px; height: 23px; left: 128.92px; top: 705px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; color: #FFFFFF; } .ButtonTextTwo{ /* Vector 662 */ cursor: pointer; position: absolute; width: 6px; height: 14px; left: 354.5px; top: 723px; } .descriptionTree{ /* Кофейня самообслуживания UpCup */ position: absolute; width: 382px; height: 55px; left: 89.73px; top: 767px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ color: #FFFFFF; } .Stacan2{ /* СТАКАН 2 */ position: absolute; width: 121.59px; height: 161.32px; left:735.49px; top: 321.69px; filter: blur(5px); transform: rotate(-20.91deg); } .Vector{ /* Vector */ height: 495.4396419788378px; width: 420px; left: 820.22px; border-radius: 0px; position: absolute; right: 0.1%; top: 300.67px; bottom: 89.9%; background: rgba(23, 22, 22, 0.01); transform: rotate(42.19deg); } .CofeeAvt{ /* 5 2 */ position: absolute; width: 503.53px; height: 761.2px; left: 801.32px; top: 141px; transform: rotate(6.6deg); } .Stacan1{ /* СТАКАН 1 */ position: absolute; width: 120.6px; height: 223.7px; left: 1200.44px; top: 456px; transform: rotate(18.85deg); } .Elipse{ /* Ellipse 999 */ position: absolute; width: 405px; height: 836.06px; left: 850.46px; top: 496px; background: rgba(145, 94, 254, 0.4); filter: blur(300px); } .modal { position: fixed; top: 500px; left: 300px; transform: translate(-50%, -50%); background-color: #1C1C1C; width: 480px; height: 420px; border-radius: 15px; overflow: hidden; z-index: 9999; /* добавлено для уверенности */ } .InputOne{ position: absolute; width: 473px; height: 81px; top: 70px; outline: none; border: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputTwo{ outline: none; border: none; position: absolute; width: 473px; height: 81px; top: 165px; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputThree{ position: absolute; width: 473px; height: 81px; top: 260px; border: none; outline: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .PriceButtonTextForm{ position: absolute; width: 156px; height: 23px; top: 360px; left: 155px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; cursor: pointer; color: #000000; } .PriceButtonForm{ position: absolute; width: 326px; height: 56px; left: 70px; top: 360px; cursor: pointer; background: #FBB03B; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); border-radius: 30px; } .iconsOut{ cursor: pointer; position: absolute; right: 20px; bottom: 345px; } .SendMessage{ color: chartreuse; margin-left: 150px; } }
@media screen and (max-width: 1024px) { .descriptionOne{ /* Новый формат. Впервые в Израиле */ position: absolute; width: 378px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ width: 476px; height: 41px; top: 223.8486328125px; left: 82.611572265625px; color: #FFFFFF; } .poragraf{ position: absolute; font-family: 'Raleway'; font-style: normal; font-weight: 700; font-size: 64px; line-height: 75px; width: 603px; height: 165px; top: 266.5576171875px; left: 82.611572265625px; color: #FFFFFF; } .descriptionTwo{ position: absolute; width: 633px; top: 550.45px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ color: #FFFFFF; } .Button{ cursor: pointer; box-sizing: border-box; position: absolute; width: 326px; height: 56px; left: 82.61px; top: 701px; border: 2px solid #FBB03B; filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.15)); border-radius: 30px; } .ButtonText{ /* Получить презентацию */ cursor: pointer; position: absolute; width: 218px; height: 23px; left: 112.8px; top: 705px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; color: #FFFFFF; } .ButtonTextTwo{ /* Vector 662 */ cursor: pointer; position: absolute; width: 6px; height: 14px; left: 354.5px; top: 723px; } .descriptionTree{ /* Кофейня самообслуживания UpCup */ position: absolute; width: 382px; height: 55px; left:82.61px; top: 757px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ color: #FFFFFF; } .Stacan2{ /* СТАКАН 2 */ position: absolute; width: 121.59px; height: 161.32px; left:660.08px; top: 321.69px; filter: blur(5px); transform: rotate(-20.91deg); } .Vector{ /* Vector */ height: 495.4396419788378px; width: 420px; left: 675.22px; border-radius: 0px; position: absolute; right: 0.1%; top: 300.67px; bottom: 89.9%; background: rgba(23, 22, 22, 0.01); transform: rotate(42.19deg); } .CofeeAvt{ /* 5 2 */ position: absolute; width: 503.53px; height: 761.2px; left: 650.79px; top: 141px; transform: rotate(6.6deg); } .Stacan1{ /* СТАКАН 1 */ position: absolute; width: 200.6px; height: 223.7px; left: 1000.06px; top: 456px; transform: rotate(18.85deg); } .Elipse{ /* Ellipse 999 */ position: absolute; width: 405px; height: 836.06px; left: 804.23px; top: 496px; background: rgba(145, 94, 254, 0.4); filter: blur(300px); } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #1C1C1C; width: 480px; height: 420px; border-radius: 15px; overflow: hidden; z-index: 9999; /* добавлено для уверенности */ } .InputOne{ position: absolute; width: 473px; height: 81px; top: 70px; outline: none; border: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputTwo{ outline: none; border: none; position: absolute; width: 473px; height: 81px; top: 165px; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputThree{ position: absolute; width: 473px; height: 81px; top: 260px; border: none; outline: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .PriceButtonTextForm{ position: absolute; width: 156px; height: 23px; top: 360px; left: 155px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; cursor: pointer; color: #000000; } .PriceButtonForm{ position: absolute; width: 326px; height: 56px; left: 70px; top: 360px; cursor: pointer; background: #FBB03B; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); border-radius: 30px; } .iconsOut{ cursor: pointer; position: absolute; right: 20px; bottom: 345px; } .SendMessage{ color: chartreuse; margin-left: 150px; } } |
@media screen and (max-width: 1024px) { .descriptionOne{ /* Новый формат. Впервые в Израиле */ position: absolute; width: 378px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ width: 476px; height: 41px; top: 223.8486328125px; left: 82.611572265625px; color: #FFFFFF; } .poragraf{ position: absolute; font-family: 'Raleway'; font-style: normal; font-weight: 700; font-size: 64px; line-height: 75px; width: 603px; height: 165px; top: 266.5576171875px; left: 82.611572265625px; color: #FFFFFF; } .descriptionTwo{ position: absolute; width: 633px; top: 550.45px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ color: #FFFFFF; } .Button{ cursor: pointer; box-sizing: border-box; position: absolute; width: 326px; height: 56px; left: 82.61px; top: 701px; border: 2px solid #FBB03B; filter: drop-shadow(0px 4px 10px rgba(0, 0, 0, 0.15)); border-radius: 30px; } .ButtonText{ /* Получить презентацию */ cursor: pointer; position: absolute; width: 218px; height: 23px; left: 112.8px; top: 705px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; color: #FFFFFF; } .ButtonTextTwo{ /* Vector 662 */ cursor: pointer; position: absolute; width: 6px; height: 14px; left: 354.5px; top: 723px; } .descriptionTree{ /* Кофейня самообслуживания UpCup */ position: absolute; width: 382px; height: 55px; left:82.61px; top: 757px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 22px; line-height: 55px; /* identical to box height, or 250% */ color: #FFFFFF; } .Stacan2{ /* СТАКАН 2 */ position: absolute; width: 121.59px; height: 161.32px; left:660.08px; top: 321.69px; filter: blur(5px); transform: rotate(-20.91deg); } .Vector{ /* Vector */ height: 495.4396419788378px; width: 420px; left: 675.22px; border-radius: 0px; position: absolute; right: 0.1%; top: 300.67px; bottom: 89.9%; background: rgba(23, 22, 22, 0.01); transform: rotate(42.19deg); } .CofeeAvt{ /* 5 2 */ position: absolute; width: 503.53px; height: 761.2px; left: 650.79px; top: 141px; transform: rotate(6.6deg); } .Stacan1{ /* СТАКАН 1 */ position: absolute; width: 200.6px; height: 223.7px; left: 1000.06px; top: 456px; transform: rotate(18.85deg); } .Elipse{ /* Ellipse 999 */ position: absolute; width: 405px; height: 836.06px; left: 804.23px; top: 496px; background: rgba(145, 94, 254, 0.4); filter: blur(300px); } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #1C1C1C; width: 480px; height: 420px; border-radius: 15px; overflow: hidden; z-index: 9999; /* добавлено для уверенности */ } .InputOne{ position: absolute; width: 473px; height: 81px; top: 70px; outline: none; border: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputTwo{ outline: none; border: none; position: absolute; width: 473px; height: 81px; top: 165px; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .InputThree{ position: absolute; width: 473px; height: 81px; top: 260px; border: none; outline: none; background: rgba(21, 21, 21, 0.75); border-radius: 39px; margin-bottom: 10px; } .PriceButtonTextForm{ position: absolute; width: 156px; height: 23px; top: 360px; left: 155px; font-family: 'Raleway'; font-style: normal; font-weight: 400; font-size: 20px; line-height: 23px; text-align: center; cursor: pointer; color: #000000; } .PriceButtonForm{ position: absolute; width: 326px; height: 56px; left: 70px; top: 360px; cursor: pointer; background: #FBB03B; box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.15); border-radius: 30px; } .iconsOut{ cursor: pointer; position: absolute; right: 20px; bottom: 345px; } .SendMessage{ color: chartreuse; margin-left: 150px; } }
Никто не будет вникать. Надо выделить проблему и выкладывать выжимку кода, относящуюся к проблеме. А не вываливать весь проект =))
Ох, с чего бы начать...
1. Простыни кода никто в голове компилировать не будет.
Возьмите минимальный код, который нужен для иллюстрации проблемы (на одном каком-то блоке) и сделайте песочницу на codepen.io
2. В прошлом вашем вопросе писала, что по крайней мере в рамках одного селектора пишите медиа в одну сторону.
3.
, у меня стили (min-width: 1440px) работают хорошо, как сделать что бы первые стили перед этими всеми запросами работали под экран 1920x1080px c расширением 2910 1080 , я думаю скорей всего дело в масштабе так как у меня экран 1920x1080px и все хорошо отображается. Пример как отображается у меня:
Почитайте про каскад и заодно и про специфичность (всяко пригодится).
А вот отсюда очень внимательно
Наверху первыми написаны обычные стили.
Потом вы их перебили для устройств, ширина который от 1440 и больше.
Чтобы при 1920 и больше снова начали применяться стили, которые были изначально, их снова придется написать в соответствующем media (min-width: 1920px).
Либо предыдущие писать на замкнутом интервале от 1440 до 1919
Правда, тут у меня есть сомнения, что по дизайну нужно именно так, потому что пожелание звучит очень странно. Либо формулировка вопроса не очень четкая.
4. По скрину - похоже, что у вас потеряно центрирование контентной области.
Узнать размеры можно так https://www.esolutions.se/en/test
Ну а потом всё равно придётся разбираться с кодом.
media (min-width: 1920px){
// Код для 1920px
}
media screen and (min-width: 1440px) and (max-width: 1919px) {
}
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Media запросы в CSS позволяют нам задавать различные стили в зависимости от размера экрана устройства, на котором отображается веб-страница. Когда у нас есть несколько media запросов, возникает вопрос о том, почему один media запрос перекрывает стили под другой экран.
Прежде всего, важно понимать порядок, в котором браузер применяет стили. Если у нас есть несколько media запросов с различными условиями, браузер будет применять стили из последнего соответствующего media запроса, который соответствует текущему разрешению экрана.
Это может привести к тому, что стили из одного media запроса перекрывают стили из другого. Чтобы избежать этой проблемы, необходимо внимательно проверить условия ваших media запросов и убедиться, что они не пересекаются или не противоречат друг другу.
Также стоит учитывать специфичность CSS правил. Если у вас есть два правила, которые применяются к одному и тому же элементу, браузер будет применять правило с более высокой специфичностью. Поэтому убедитесь, что ваши стили в media запросах достаточно специфичны, чтобы быть применены в нужный момент.
Наконец, не забывайте про порядок подключения стилей в вашем HTML документе. Если стили из одного media запроса подключены после стилей из другого media запроса, они могут перекрыться. Убедитесь, что ваши стили подключены в правильном порядке, чтобы избежать подобных проблем.
В целом, чтобы избежать конфликтов между media запросами, необходимо внимательно анализировать условия и специфичность стилей, а также следить за порядком подключения стилей в вашем проекте.