WebSite X5Help Center

 
Oleg P.
Oleg P.
User

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

Autore: Oleg P.

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

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

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

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

Postato il
6 RISPOSTE - 1 CORRETTO
Aleksej H.
Aleksej H.
Moderator

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

<style>

 @media (max-width: 600px) {

   .text-inner img {

     display: none;

   }

 }

</style>

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

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

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

Leggi di più
Postato il da Oleg P.
Vlad S.
Vlad S.
User

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

Leggi di più
Postato il da Vlad S.
Oleg P.
Oleg P.
User
Autore
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>

Leggi di più
Postato il da Oleg P.
Aleksej H.
Aleksej H.
Moderator

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

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

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

Leggi di più
Postato il da Oleg P.