УБРАТЬ КАРТИНКУ ПРИ ДОСТИЖЕНИИ ОПРЕДЕЛЕННО
Autore: Oleg P.
Visite 1461,
Followers 1,
Condiviso 0
Доброго времени суток!
Хотел бы узнать, как можно убрать картинку при достижении сайта разрешения 600px.
Нужно для адаптированного сайта.
Сайт, о котором идет речь - https://www.diastra.ru/catalog
Postato il
Здравствуйте. Скрыть картинку можно так (добавьте в свойства сайта или страницы):
<style>
@media (max-width: 600px) {
.text-inner img {
display: none;
}
}
</style>
Но есть две проблемы. Это скрывает все картинки в текстовых объектах, плюс, не убирает место, отведённое под картинку. Не смог найти другого решения. Возможно, из-за моих навыков CSS, а может из-за специфики HTML кода объекта. Можно попробовать текст и картинку поместить в разные DIV с разными классами (внутри объекта HTML).
Autore
А подскажете, как еще после убраных картинок, подвинуть блок текста на их место
Не знаю как у вас размещен контент, но я бы сделал так, разместил картинки и текст в разные блоки и потом режиме адаптивный на неоходимом разрешении скрыл блок с картинкой, тогда все само подвинется.
Autore
Владислав, доброго времени суток! К сожалению там есть некая фишка для реализации в стилях, из-за чего приходится именно так делать, а не вставлять два отдельных блока. Поэтому, хочу понять, как подвинуть текст при разрешении 600px и меньше.
Я понимаю, что надо <b class="fs11lh1-5"><span class="fs14lh1-5">Домофоны</span></b>, поднять до <div data-line-height="1" class="lh1"><div data-line-height="1" class="lh1"><img class="image-0 fleft" src="images/15241e4a2adc2159a31715f318f3fb29.png" title="" alt=""><b class="fs11lh1"><span class="fs12lh1 cf1"> </span></b></div></div>, то бишь, отменить при разрешении 600px и меньше часть кода, а именно класс <blockquote>
"А подскажете, как еще после убраных картинок, подвинуть блок текста на их место" - об этом я уже написал: "Но есть две проблемы. Это скрывает все картинки в текстовых объектах, плюс, не убирает место, отведённое под картинку. Не смог найти другого решения. Возможно, из-за моих навыков CSS, а может из-за специфики HTML кода объекта. Можно попробовать текст и картинку поместить в разные DIV с разными классами (внутри объекта HTML).".
Autore
Все, я решил проблему, оставив все в одном блоке. Я решил поступить интереснее, сохранить картинку на мобидьных устройствах, но поднять ее над текстом, а текст опустить вниз. Но и без картинки, мне удалось подвинуть текст. Спасибо за представленные варианты ответов, это помогло мне покопаться более детальнее и реализовать код так, как мне хотелось)