WebSite X5Help Center

 
Oleg P.
Oleg P.
User

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

Author: Oleg P.

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

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

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

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

Posted on the
6 ANSWERS - 1 CORRECT
Aleksej H.
Aleksej H.
Moderator

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

<style>

 @media (max-width: 600px) {

   .text-inner img {

     display: none;

   }

 }

</style>

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

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

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

Read more
Posted on the from Oleg P.
Vlad S.
Vlad S.
User

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

Read more
Posted on the from Vlad S.
Oleg P.
Oleg P.
User
Author
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>

Read more
Posted on the from Oleg P.
Aleksej H.
Aleksej H.
Moderator

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

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

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

Read more
Posted on the from Oleg P.