Different image of Bootstrap'a on computer and phone.



  • Why, with an adaptive buzzer, the columns are displayed differently with the same screen expansion. Here's two photos:

    введите сюда описание изображения введите сюда описание изображения

    The first one on the phone is the second from the computer. The savages are described as "col-xs-12 col-sm-12 col-md-6." Where I'm stupid again, you're going to send the truth. ♪ ♪



  • UPD. Component width

    The page is full of elements not placed on a mobile wide.

    (1) Slider at the beginning 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) Best list:

    .goalscores, .assistants {
    width: 600px;

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

    (3) Comments:

    .layout-comment {
    width: 500px;

    (4) The Copierite and the feedback plate are not placed in their column (the mobile screen 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>

    Send the right width through the media request. Put a copyright on the narrow screen and a back-to-foot. Remove the slider's width from HTML.


    Tables

    Looks like you're wearing two tables. It's easy to get out 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>

    Put the tables in the class block. table-responsiveAnd the sandwich will add to them. http://getbootstrap.com/css/#tables-responsive ♪

    <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. For col-xs-12 col-sm-12 col-md-6 You can use it. col-md-6♪ The same will happen: starting with 992px, the column will have 50 per cent of the breadth of the container and will be extended to 100 per cent.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2