WebSite X5Help Center

 
Oleg P.
Oleg P.
User

УБРАТЬ КАРТИНКУ ПРИ ДОСТИЖЕНИИ ОПРЕДЕЛЕННО  ru

Auteur : Oleg P.

Доброго времени суток!

Хотел бы узнать, как можно убрать картинку при достижении сайта разрешения 600px.

Нужно для адаптированного сайта.

Сайт, о котором идет речь - https://www.diastra.ru/catalog

Posté le
6 RéPONSES - 1 CORRECT
Aleksej H.
Aleksej H.
Moderator

Здравствуйте. Скрыть картинку можно так (добавьте в свойства сайта или страницы):

<style>

 @media (max-width: 600px) {

   .text-inner img {

     display: none;

   }

 }

</style>

Но есть две проблемы. Это скрывает все картинки в текстовых объектах, плюс, не убирает место, отведённое под картинку. Не смог найти другого решения. Возможно, из-за моих навыков CSS, а может из-за специфики HTML кода объекта. Можно попробовать текст и картинку поместить в разные DIV с разными классами (внутри объекта HTML).

Lire plus
Posté le de Aleksej H.
Oleg P.
Oleg P.
User
Auteur
Aleksej H.
Здравствуйте. Скрыть картинку можно так (добавьте в свойства сайта или страницы): <style>  @media (max-width: 600px) {    .text-inner img {      display: none;    }  } </style> Но есть две проблемы. Это скрывает все картинки в текстовых объектах, плюс, не убирает место, отведённое под картинку. Не смог найти другого решения. Возможно, из-за моих навыков CSS, а может из-за специфики HTML кода объекта. Можно попробовать текст и картинку поместить в разные DIV с разными классами (внутри объекта HTML).

А подскажете, как еще после убраных картинок, подвинуть блок текста на их место

Lire plus
Posté le de Oleg P.
Vlad S.
Vlad S.
User

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

Lire plus
Posté le de Vlad S.
Oleg P.
Oleg P.
User
Auteur
Vlad S.
Не знаю как у вас размещен контент, но я бы сделал так, разместил картинки и текст в разные блоки и потом режиме адаптивный на неоходимом разрешении скрыл блок с картинкой, тогда все само подвинется.

Владислав, доброго времени суток! К сожалению там есть некая фишка для реализации в стилях, из-за чего приходится именно так делать, а не вставлять два отдельных блока. Поэтому, хочу понять, как подвинуть текст при разрешении 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"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span></b></div></div>, то бишь, отменить при разрешении 600px и меньше часть кода, а именно класс <blockquote>

Lire plus
Posté le de Oleg P.
Aleksej H.
Aleksej H.
Moderator

"А подскажете, как еще после убраных картинок, подвинуть блок текста на их место" - об этом я уже написал: "Но есть две проблемы. Это скрывает все картинки в текстовых объектах, плюс, не убирает место, отведённое под картинку. Не смог найти другого решения. Возможно, из-за моих навыков CSS, а может из-за специфики HTML кода объекта. Можно попробовать текст и картинку поместить в разные DIV с разными классами (внутри объекта HTML).".

Lire plus
Posté le de Aleksej H.
Oleg P.
Oleg P.
User
Auteur
Aleksej H.
"А подскажете, как еще после убраных картинок, подвинуть блок текста на их место" - об этом я уже написал: "Но есть две проблемы. Это скрывает все картинки в текстовых объектах, плюс, не убирает место, отведённое под картинку. Не смог найти другого решения. Возможно, из-за моих навыков CSS, а может из-за специфики HTML кода объекта. Можно попробовать текст и картинку поместить в разные DIV с разными классами (внутри объекта HTML).".

Все, я решил проблему, оставив все в одном блоке. Я решил поступить интереснее, сохранить картинку на мобидьных устройствах, но поднять ее над текстом, а текст опустить вниз. Но и без картинки, мне удалось подвинуть текст. Спасибо за представленные варианты ответов, это помогло мне покопаться более детальнее и реализовать код так, как мне хотелось)

Lire plus
Posté le de Oleg P.