Перейти к содержанию
kavi

Описание товара не влазит по ширине на мобильном

Рекомендуемые сообщения

Подскажите пожалуйста как заставить браузер мобильного переносить слова, не помещающиеся в окне? На телефоне отображается также, как и на симуляторе

http://webmark.com.ua/mobile/?url=http%3A%2F%2Firis-color.com.ua%2F

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
26 минут назад, kavi сказал:

Подскажите пожалуйста как заставить браузер мобильного переносить слова, не помещающиеся в окне? На телефоне отображается также, как и на симуляторе

http://webmark.com.ua/mobile/?url=http%3A%2F%2Firis-color.com.ua%2F

у меня все отображается коректно, скорее всего текст откуда то скопировали вместе со всем html кодом

 

image.png.009dc1a1e6717cb3c89ec59f34160782.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

У вас проблема в разметке 

Обычная разметка бутстрап:

Сначала  идет блок-обертка div.container у которого

.container {

padding-right: 15px;

padding-left: 15px;

}

А потом в него вкладывают div.row, который эти паддинги убирает, чтобы прижать блоки ближе к краям обертки с помощью отрицательных марджинов.

.row {

margin-right: -15px;

margin-left: -15px;

}

 

 

Спойлер

<div class="product-layout product-list col-xs-12">
    <div class="product-container">

        <div class="item-inner">

           <div class="row">

               <div class="left-block col-xs-12 col-sm-4 col-md-4">
                     <div class="products">

В вашем случае не используется стандартный div.container

а div class.product-container, у которого нет стандартных стилей div.container

Даже, если ему дописать класс div class="product-container container"

это проблему не решает, потому что, хотя блок и сужается, но отображение режет блок div.item-inner

У которого в стилях прописано

Спойлер

.item-inner {

border: 0;

padding: 0;

position: relative;

display: inline-block;

width: 100%;

/* overflow: hidden; */

}

Если этот хидден отключить, то все отображается.

Но надо разобраться как это отобразится по всему сайту в разных разрешениях экрана.

Иными словами.

У вас 2 глюка:

У вас блок div.row оказывается шире чем div.inner и div.inner обрезает края за счет стиля overflow: hidden;)

Кроме того, из-за того, что у вас  div.row вложен не в  div.container, а в обычный div

ширина контента получается больше ширины экрана и появляется горизонтальная полоса прокрутки.

Кстати, какой-то баг форума- цепляет чужие картинки в сообщение при исправлении сообщения.

Изменено пользователем jaffagold

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.