WebSite X5Help Center

 
Oleg P.
Oleg P.
User

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

Autor: Oleg P.

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

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

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

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

Publicado en
6 RESPUESTAS - 1 CORRECTO
Aleksej H.
Aleksej H.
Moderator

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

<style>

 @media (max-width: 600px) {

   .text-inner img {

     display: none;

   }

 }

</style>

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

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

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

Leer más
Publicado en de Oleg P.
Vlad S.
Vlad S.
User

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

Leer más
Publicado en de Vlad S.
Oleg P.
Oleg P.
User
Autor
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>

Leer más
Publicado en de Oleg P.
Aleksej H.
Aleksej H.
Moderator

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

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

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

Leer más
Publicado en de Oleg P.