-
AuthorPosts
-
Andrzej Wachałowicz Friend
Andrzej Wachałowicz
- Join date:
- March 2015
- Posts:
- 23
- Downloads:
- 91
- Uploads:
- 22
- Thanks:
- 18
- Thanked:
- 1 times in 1 posts
September 30, 2014 at 11:52 am #201708How can I force tables in Article to be responsive ?
-
Pankaj Sharma Moderator
Pankaj Sharma
- Join date:
- February 2015
- Posts:
- 24589
- Downloads:
- 144
- Uploads:
- 202
- Thanks:
- 127
- Thanked:
- 4196 times in 4019 posts
September 30, 2014 at 1:03 pm #551172Hi
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
2 users say Thank You to Pankaj Sharma for this useful post
Andrzej Wachałowicz FriendAndrzej Wachałowicz
- Join date:
- March 2015
- Posts:
- 23
- Downloads:
- 91
- Uploads:
- 22
- Thanks:
- 18
- Thanked:
- 1 times in 1 posts
September 30, 2014 at 7:58 pm #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:
wingly Friendwingly
- Join date:
- February 2014
- Posts:
- 310
- Downloads:
- 0
- Uploads:
- 87
- Thanks:
- 80
- Thanked:
- 83 times in 48 posts
October 1, 2014 at 10:56 am #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>
1 user says Thank You to wingly for this useful post
wingly Friendwingly
- Join date:
- February 2014
- Posts:
- 310
- Downloads:
- 0
- Uploads:
- 87
- Thanks:
- 80
- Thanked:
- 83 times in 48 posts
Andrzej Wachałowicz FriendAndrzej Wachałowicz
- Join date:
- March 2015
- Posts:
- 23
- Downloads:
- 91
- Uploads:
- 22
- Thanks:
- 18
- Thanked:
- 1 times in 1 posts
October 1, 2014 at 5:29 pm #551400Thank You for your help.
For the moment I can see the following screens:
1. Desktop – OK:
2. iPad – OK
3. iPhone – horizontal – OK4. iPhone – portrait – not really OK, but we are very close to ideal solution.
I will work this out and show You results later.
-
wingly Friend
wingly
- Join date:
- February 2014
- Posts:
- 310
- Downloads:
- 0
- Uploads:
- 87
- Thanks:
- 80
- Thanked:
- 83 times in 48 posts
October 2, 2014 at 5:50 am #551485Change
@media (max-width: 767px) {
.wingly-div span4 {
width: 100% !important;
}
}to
@media (min-device-width : 768px) {
.wingly-div span4 {
width: 100% !important;
}
}1 user says Thank You to wingly for this useful post
-
AuthorPosts
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, 1 month ago.
We moved to new unified forum. Please post all new support queries in our New Forum
Jump to forum
Problem – Tables are not responsive in Article
Viewing 7 posts - 1 through 7 (of 7 total)