Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • Andrzej Wachałowicz Friend
    #201708

    How can I force tables in Article to be responsive ?


    1. Zrzut-ekranu-35
    2. Zrzut-ekranu-36
    Pankaj Sharma Moderator
    #551172

    Hi
    Try this
    Go to
    /template/your ja template(ja Decore) / local/themes/msf/bootstrap.css
    find this code

    @media (max-width: 767px) {
    .table-responsive {
    width: 100%;
    margin-bottom: 17.25px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #dddddd
    -webkit-overflow-scrolling: touch;
    }
    .table-responsive > .table {
    margin-bottom: 0;
    }
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > th,
    .table-responsive > .table > tfoot > tr > th,
    .table-responsive > .table > thead > tr > td,
    .table-responsive > .table > tbody > tr > td,
    .table-responsive > .table > tfoot > tr > td {
    white-space: nowrap;
    }

    and change it into

    @media (max-width: 767px) {
    .table-responsive {
    width: 100%;
    margin-bottom: 17.25px;
    overflow-y: hidden;
    overflow-x: scroll;
    -ms-overflow-style: -ms-autohiding-scrollbar;
    border: 1px solid #dddddd
    -webkit-overflow-scrolling: touch;
    }
    .table-responsive > .table {
    margin-bottom: 0;
    }
    .table-responsive > .table > thead > tr > th,
    .table-responsive > .table > tbody > tr > th,
    .table-responsive > .table > tfoot > tr > th,
    .table-responsive > .table > thead > tr > td,
    .table-responsive > .table > tbody > tr > td,
    .table-responsive > .table > tfoot > tr > td {
    /* white-space: nowrap;*/
    }

    Just comment out the code >> /* white-space: nowrap;*/

    Let me know if it helps

    Andrzej Wachałowicz Friend
    #551222

    <em>@pankajsharma 447866 wrote:</em><blockquote>Let me know if it helps</blockquote>

    It really helped. Thanks.
    But still I’ve got incomplete table in iphone portrait mode:


    1. Zrzut-ekranu-37
    wingly Friend
    #551349

    @andrzejw ;

    You will not achieve your goal using tables. You need to restyle this article, eliminate Tables and replace with divs. Open this article and choose in Editor replace the code in article with this one. p.s. You may need to style it a bit, but it will make it responsive as you want.


    <div class="row wingly-div">
    <div class="span4">
    <title> CO TO JEST?</title>
    <p>
    Czysta architektonicznie gotycka świątynia spojona na zawsze z klasztorem jest miejscem, gdzie można odnaleźć swoją wypaloną, zagubioną, zdeptaną, wyśmianą tożsamość. W historycznej przestrzeni możemy przeżywać swoje rekolekcje, dni: skupienia, ciszy, postu, ale także rekolekcje rodzinne, małżeńskie i inne. Misjonarze Świętej Rodziny mieszkający w tym Klasztorze, zapraszają do odważnej decyzji zmierzenia się ze swoim życiem, do przyjrzenia się sobie i dostrzeżenia blasku światła betlejemskiego, którego żadna ciemność, także serca ludzkiego, nie jest i nie będzie w stanie zagasić.
    </p>
    </div>

    <div class="span4">
    <title> CO TO JEST?</title>
    <p>
    <ul>
    <li>Rekolekcje w ramach Spotkań Małżeńskich</li>
    <li>Kurs Tobiasz i Sara</li>
    <li>Kurs Akwila i Pryscylla</li>
    <li>Rekolekcje z bł. Małżeństwem Quattrocchi</li>
    <li>Kurs przedmałżeński</li>
    <li>Oaza Rodzin I stopnia</li>
    <li>Weekendowa Szkoła Dialogu</li>
    </ul>
    </p>
    </div>

    <div class="span4">
    <div class="inner"><b>Centrum Rekolekcyjne</b><br>
    <p class="fa fa-map-marker"><span style="color: #fff font-family: Raleway;">  ul. Klasztorna 2, 62-530 Kazimierz Biskupi</span></p>
    <hr>
    <p class="fa fa-phone-square">  +48 797 458 233</p>
    <br>
    <p class="fa fa-laptop"><a href="http://kazimierzklasztor.pl" target="_blank"><span style="color: #fff font-family: Raleway;"> http://kazimierzklasztor.pl </span></a></p>
    <br>
    <p class="fa fa-envelope"><span style="font-family: Raleway; color: #ffffff"> <span id="cloak41386"><a href="mailto:biuro@kazimierzklasztor.pl">biuro@kazimierzklasztor.pl</a></span>
    </span></p>
    </div></span></p>
    </div>
    </div>

    wingly Friend
    #551350

    Also add to the css the following statement

    @media (max-width: 767px) {
    .wingly-div span4 {
    width: 100% !important;
    }
    }

    Andrzej Wachałowicz Friend
    #551400

    Thank You for your help.

    For the moment I can see the following screens:

    1. Desktop – OK:
    2. iPad – OK
    3. iPhone – horizontal – OK

    4. iPhone – portrait – not really OK, but we are very close to ideal solution.

    I will work this out and show You results later.


    1. Zrzut-ekranu-44
    2. Zrzut-ekranu-45
    wingly Friend
    #551485

    @andrzejw;

    Change

    @media (max-width: 767px) {
    .wingly-div span4 {
    width: 100% !important;
    }
    }

    to

    @media (min-device-width : 768px) {
    .wingly-div span4 {
    width: 100% !important;
    }
    }

Viewing 7 posts - 1 through 7 (of 7 total)

This topic contains 7 replies, has 3 voices, and was last updated by  wingly 10 years ago.

We moved to new unified forum. Please post all new support queries in our New Forum