Индивидуальный CSS класс, не меняющий стили с помощью медиа-запроса - PullRequest
Новая
       6

Индивидуальный CSS класс, не меняющий стили с помощью медиа-запроса

1 голос
/ 09 января 2020

У меня есть страница, которую я создаю для клиента в Leadpages, которая должна быть завтра.

Прежде чем я начну, я прошу прощения за то, как долго это будет. Я пытаюсь убедиться, что у меня есть вся информация. Я искал ответ и не нашел его.

Проблема в том, что по какой-то причине я не могу получить раздел контактов (в правой части страницы) применять мои стили. Запутанная часть, это происходит только в моих медиа-запросах.

Я несколько раз проверял свои медиазапросы и не вижу ошибок.

Я пропустил HTML через HTML линтер, а мой CSS - CSS линтер. Никаких проблем у них тоже нет.

Возможно, что еще более странно, я не могу повторить проблему в Codepen или JSFiddle. Только на странице.

Чтобы проверить, как это работает, у меня для этой области контакта не установлено ни одного дисплея с максимальной шириной 670 пикселей. По какой-то причине Codepen и JSFiddle скрывают раздел контактов перед этим медиа-запросом и показывают его после медиа-запроса.

Я не понимаю, что происходит не так. Я просто хочу выяснить, как решить проблему с моими стилями, не подающими заявку на раздел контактов на мобильном телефоне.

Каждый раз, когда я проверяю вещи, я попадаю в новую проблему.

ОБНОВЛЕНИЕ: Привет всем, похоже, системе потребовалось время для обновления или еще чего-нибудь. Наконец-то решил поработать к счастью! Я снова попытался очистить кэш, как предлагал Дженуэль, и он начал работать.

Это код, который я использую ... https://jsfiddle.net/JoyfullyDeveloped/z4f1c7Lo/12/

HTML

<div class="contact-container">
<img class="headshot" src="https://lh3.googleusercontent.com/LZcoTszwiJtn_7ynVmgoKhdJev6ADFdxFWQY_6jd4iAZtvSPClZLeYpcJjT54vIhTQdvqZH9ri7jucSx70ktsg=w435">

<div class="contact">
<img class="contact-pic" src="https://lh3.googleusercontent.com/Db_erckwx5QElAB_PyEHdmaSMnaLPbMvAeYqk7_Cg7xKR-EbODou0cRfvrcRvOiDBP7DCSHEAEvh0NY96vsz=s0">
<p class="contact-section-paragraph">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Tenetur eius, at perspiciatis nihil accusamus voluptatibus animi architecto sunt quas blanditiis veritatis, excepturi, recusandae omnis voluptatem. Harum veritatis alias porro sed.</p>

<p>MAX MUSTERMANN</p>
<p>TELEFON: +49 (0) 666 6666 666</p>
<p>EMAIL: INFO@INFO.DE</p>

</div>

CSS

.headshot {
max-width: 700px;
width: 100%;
position: relative;
left: -362px;
}

.contact {
float: right;
max-width: 460px;
text-align: center;
margin-top: 500px;
position: relative;
top: -1070px;
}

.contact-pic {
width:200px;
}

@media screen and (max-width:1820px) {
.headshot  {
position:relative;
left:-316px;
}
}

@media screen and (max-width:1735px) {
.headshot {
position:relative;
left:-270px;
}
}

@media screen and (max-width:1640px) {
.headshot {
position:relative;
left:-224px;
}
}

@media screen and (max-width:820px) {
.headshot {
position:relative;
left:-178px;
}
}

@media screen and (max-width:768px) {
.headshot {
position:relative;
left:-132px;
}
}

@media screen and (max-width:670px) {
.headshot {
position:relative;
left:-86px;
}
.contact {
display: none;
}
}

Даже голова позиции в кадре не корректируются в медиа-запросе. Однако это происходит только для медиа-запросов размером 820px или ниже.

...