Responsive elements in Joomla articles

Hi,

I am using a table with 4 columns and 2 rows as element in Joomla articles. The first row contains images and second row contains texts description of the image above located. The problem is because tables are not responsive elements, so if I change the window size it looks really messy, even using <td width="x"> property. Is some code please you could suggest me to organize the content in such way without loosing the responsive property from this template?

Thanks in advance!

You can set table to be 100% width, set columns size also basing on % width, and finally set images inside to have max 100% width.

Looks better, however in small screens is a message "scroll horizontally to view the whole table". Other Gavick templates usually reorganize automatically in small screens columns vertically (One below of the others), some ideas how to achieve this with this template?

Thank you!

With tables it can;t be done, but you could do this with use of some div's and css media-queries.
Create 2 divs that floats next to each other and if there is not enough space, you can remove float and display one under another.

Hi CYBEREK,

Thank you for your answer. I already tried with some code pieces founded on Internet without success. Maybe please could you help me with some code ideas using divs?

Thank you in advance!

With 4 column (as example):
html:

Code: Select all

<div class="cWrapper">
<div class="c4">test 1</div>
<div class="c4">test 2</div>
<div class="c4">test 3</div>
<div class="c4">test 4</div>
</div>


css:

Code: Select all

.cWrapper {width: 100%; overflow: hidden}
.c4 {width: 25%; float: left;}


Just as an overview.

It is working perfect. I just have to add some media queries to made it responsive:

Code: Select all

@media (max-width: 768px){
  .c4 {
   width: 40%;
   float: left;
   margin: 0 5%;
   }
}

@media (max-width: 480px){
  .c4 {
   width: 80%;
   float: left;
   margin: 0 10%;
   }
}

Thank you!!

Yep, this way you have created 2 columns and 1 column when viewed on smaller screens.
Is there anything else I can help you with regarding this topic?

Is looking great now. That's everything. As usual you have a great support.

Thank you!

Thanks for the words of appreciation.
Please let me know if you will have any other questions regarding this topic.