Breaking lines in tables displayed on smaller displays

Hello,

Im using inStyle template for restaurant menu webpage. It is fine and responsive but i have problem with tables. When i decrease browser window or try to display that page on any smartphone, lines in table break. I dont know how to make those tables responsive with no wrap content. Here is example page with my table:

http://domowatorun.pl/index.php/2014-07 ... 2/czwartek

Is there any style or something to fix it?

Best regards
Przemek

Please add this code to override.css and make sure override is enabled in template settings.

Code: Select all

#itemBody > span[itemprop="articleBody"]{
    display: block;
    overflow: scroll;
    position: relative;
    width: 100%;
}

Thank you for answer but this didnt help. There are still wraping lines in tables. Most important is last column with prices - it should be without breaks.

This is my page after flushing cache:
http://domowatorun.pl/index.php/2014-07 ... 2/czwartek

Regards
Przemek

Hi

I do not see my code in css. Are You sure it was added properly ? Please send me an access to joomla panel so I'll try myself.

Hi

Sorry. It was a typo with "#" instead of "."

Now it works fine.

I think there is still the same problem... (I flushed cache locally and i flushed cache on siteground). When i change browser window or i watch this page on smartphone, there are still wraped text in tables. And after adding your script, there are scrollbars, which dont look very good.

Hi

This scrollbars are exactly the solution for tables. It's a responsive function of bootstrap.

If You do not like it I would advice to disable bootstrap and than use this code to reduce paddings and font size, to squeeze it somehow:

Code: Select all

#gkMainbody table tbody,
#gkMainbody table thead,
#gkMainbody table tfoot {
    display: block;
    width: 100% !important;
}

#gkMainbody table tbody td,
#gkMainbody table thead td,
#gkMainbody table tfoot td {
    padding: 5px 0;
}

#gkMainbody table tbody td h4,
#gkMainbody table thead td h4,
#gkMainbody table tfoot td h4,
#gkMainbody table tbody td h5,
#gkMainbody table thead td h5,
#gkMainbody table tfoot td h5 {
    font-size: 12px;
}

#gkMainbody table tbody td img,
#gkMainbody table thead td img,
#gkMainbody table tfoot td img {
    width: 50px;
}


all above should go to mobile.css