Why, with adaptive layout using bootstrap, with the same screen expansion, columns are displayed differently. Here are two photos:

enter image description here enter image description here

The first from the phone is the second from the computer (with the same extension as the phone). Diva attributes are spelled as "col-xs-12 col-sm-12 col-md-6". Where am I stupid again, direct the experts on the right path ...

  • added to the head? - <meta name = "viewport" content = "width = device-width, initial-scale = 1.0, maximum-scale = 1" /> - soledar10
  • <meta name = "viewport" content = "width = device-width, initial-scale = 1"> added without a maximum scale, well, this is not critical. - overtheman
  • Can you add your page's HTML and CSS to the question? Or give a link to it? - Gleb Kemarsky

1 answer 1

UPD. Width of elements

The page is full of elements that do not fit on the mobile phone width.

1) Slider at the top of the page:

<div class="slider-nav slick-slide slick-cloned" style="width: 585px;" data-slick-index="-1" aria-hidden="true" tabindex="-1"> .slider-nav img { width: 580px; @media screen and (max-width: 767px) .slider-for { width: 585px;

2) Top Lists:

 .goalscores, .assistants { width: 600px; .list-gs, .list-as { width: 600px;

3) Comments:

 .layout-comment { width: 500px;

4) The copyright and mail for feedback do not fit in their column (on the mobile screen, it is too narrow for them):

 <div class="feedback">Обратная связь: <a href="mailto:redactor@eurocups.ru">redactor@eurocups.ru</a></div> <p class="copyright">© UEFACups.RU 2016</p>

Set the desired width through the media query. Rearrange the copyright and feedback under the footer on a narrow screen. Remove the slider width from HTML.

Tables

Looks like there are two tables in your layout. At the bootstrap table easily go beyond the edge of the screen.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <table class="table table-bordered"> <tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr> </table>

Wrap the tables in a block with the table-responsive class, and the bootstrap will add a horizontal scroll bar to them.

 <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> <div class="table-responsive"> <table class="table table-bordered"> <tr><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td><td>Text</td></tr> </table> </div>

Ps. Instead of col-xs-12 col-sm-12 col-md-6 you can simply use col-md-6 . It will be exactly the same: starting from 992px, the column will occupy 50% of the width of the container, and before that it will stretch to 100%.

  • Sorry, does not treat. What is strange is that the whole site is divided in this way. I turn on the cap, where I don’t have any speakers, even where bare row shows only 50%. Some miracles. As for "col-xs-12 col-sm-12 col-md-6" and "col-md-6", the second variant was originally used. But because of this jamb added the first two classes, because I thought it was because of their absence. What to do xs ... - overtheman
  • @overtheman Can you show HTML-CSS and / or a link to the page? - Gleb Kemarsky 7:58 pm
  • uefacups.ru - overtheman
  • @overtheman The page is full of items that do not fit on the mobile phone in width. Updated the answer. - Gleb Kemarsky
  • hemorrhagic smartphones with 360px. Thank you for the clear and precise answer. - overtheman