#css
Вопрос:
В wordpress я добавил немного HTML в элемент аккордеона, чтобы добавить изображение справа от текста. На рабочем столе это выглядит нормально. Однако на мобильном устройстве примерно половина изображения выглядит обрезанной, это не приведет к автоматическому размещению изображения под текстом.
Я знаю, как указать изменения на определенной странице .page-id-24005 и т.д., И я знаю, как вносить изменения в мобильную версию. @media only screen and (max-width:480px) { /*code*/ }
Но с чем я борюсь, так это с тем, чтобы совместить то и другое. Как мне внести изменения на одной конкретной мобильной странице (в моем случае переместите изображение под текстом)? Я не хочу, чтобы это повлияло на какие-либо другие страницы.
Я пробовал это: @media only screen and (max-width: 480px){ .responsive .page-id-24005 .image-overlay-inside { position: relative; } }
Но на самом деле это мало что дало. Любая помощь/советы будут оценены по достоинству.
Комментарии:
1. Вы протестировали
position: relative;в инспекторе, чтобы подтвердить эффективность стиля? Структура CSS выглядит нормально, ваш селектор правильный (как по последовательности, так и по специфике)?2. Можете ли вы привести пример страницы ?
3. @Pof это эта страница ( questromworld.bu.edu/grad/car_path_test )
4. @Фриш Не уверен, что вы подразумеваете под «Инспектором»? Я пытался следовать примерам из образцов, которые я нашел в Интернете, но они недостаточно похожи, поэтому я не могу быть уверен, что моя последовательность правильна.
Ответ №1:
Ваш код работает хорошо, как вы можете видеть на экране печати инспектора моего браузера.
Если вы хотите отладить свой код, вам нужно знать, как использовать инспектор в браузерах. Если вы используете chrome, я бы рекомендовал прочитать эту документацию
Комментарии:
1. Спасибо! Вы были правы в том, что код правильный, мне просто не хватало одной строки в самом коде страницы
flex-wrap: wrap. Когда я добавил это к одному<div style="display: flex; flex-wrap: wrap;">, это сработало так, как было задумано.