Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
  • Sign Up

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


Recommended Posts

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

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

Link to post
Share on other sites

26 минут назад, kavi сказал:

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

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

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

 

image.png.009dc1a1e6717cb3c89ec59f34160782.png

Link to post
Share on other sites

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

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

Сначала  идет блок-обертка 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

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

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

Edited by jaffagold
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.