HTML - Table not responsive in mobile view

Hi Support,

Once i put a table code in html

<table style="border="0" width="100%"> contents.... </table>

The desktop view is ok but when come to mobile view, it show up a scroll bar and not responsive. Anyway to solve it?

Looking forward to your help urgently.

Many thanks.

Kelvin

What kind of elements do you have inside of your table? Perhaps one of them is pushing table width?

Hi
I have a very same problem and table width is 100%. But it seems that it is not a table width problem because it doesn't work even in category list.

Attached is a picture showing a very same category view with two of your templates: left: SteakHouse, right Bluap.

Steakhouse responsive template have some issues

Could you please post an url to your site?

The address: http://mobilis.io/supported-sensors.html and the address where everything is O.K. (bluap) is http://senseview.mobi/supported-sensors.html

Tnx

First thing - there seems to be a bug with css stylesheets ordering in this template and it will be fixed with next release. To fix it please edit file:
templates/gk_steakhouse/layouts/blocks/head.php
and move this part of code:

Code: Select all

if($this->API->get("css_override", '0')) {
    $this->API->addCSS($this->API->URLtemplate() . '/css/override.css');
}


from line 30 to 69, just under:

Code: Select all

// add responsive stylesheets
$this->generateLayout();


so it looks this way:

Code: Select all

// add responsive stylesheets
$this->generateLayout();

if($this->API->get("css_override", '0')) {
    $this->API->addCSS($this->API->URLtemplate() . '/css/override.css');
}


Then please write back.

Thank you for reply, I moved part of code as you suggested, but problem still exist.

Best regards

There will not be any difference in table view, it will be visible in site source code and will allow futher modification. But it looks like your modification was not made.

Hm, strange. I did everything you asked (screenshoot), cleared cache, restarted a server. You can check.... http://mobilis.io/supported-sensors.html

It's more complicated problem. I'll write back as soon as I get an information from our dev team.

Any news? You advertize the template as Responsive, but in this case it is not, because it simply doesn't work on mobile.

Tnx

Please modify file:
templates/gk_steakhouse/css/mobile.css

and change around line 199 from:

Code: Select all

#gkMainbody table tbody,
#gkMainbody table thead,
#gkMainbody table tfoot {
   width: 540px!important;
   display: table;
}


to

Code: Select all

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


you might also want to change around line 212 from:

Code: Select all

@media only screen and (max-width: 440px) {
   #gkMainbody table {
      width:260px!important;
   }
}


to

Code: Select all

@media only screen and (max-width: 440px) {
   #gkMainbody table {
      width: 100%!important;
   }
}


Sadly it can be only done this way for the time being. You might also try to update the template to newest version where override.css is used a little bit differently and above changes might be used inside of it, but without an update I can't tell for sure (please make a backup before - sql and files)

I got response from our devteam - this behave is on purpose allowing to swipe through more wide tables. But in your case when the table is narrow, the scrolling is not necessary. Please let me know with the update.