WebSite X5Help Center

 
Oleg P.
Oleg P.
User

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

Автор: Oleg P.
Просмотрено 1099, Подписчики 1, Размещенный 0  

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

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

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

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

Размещено
6 Ответы - 1 Корректно
Aleksej H.
Aleksej H.
Moderator

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

<style>

 @media (max-width: 600px) {

   .text-inner img {

     display: none;

   }

 }

</style>

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

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

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

Читать больше
Размещено От Oleg P.
Vlad S.
Vlad S.
User

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

Читать больше
Размещено От Vlad S.
Oleg P.
Oleg P.
User
Автор
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>

Читать больше
Размещено От Oleg P.
Aleksej H.
Aleksej H.
Moderator

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

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

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

Читать больше
Размещено От Oleg P.