Forum
Welcome, Guest
Please Login to access forum.
Re:Table (1 viewing) 
Go to bottom
TOPIC: Re:Table
#6517
John Dagelmore
Admin
Posts: 3746
User Online Now
Re:Table Karma: 80  
No that's not possible and it's not the way to approach responsive layouts. Forget about tables for cellphone and tablets.

The best that you can do is adding the following code to ensure a minimum width for the image too:

Code:

table.style8 td img { min-width: 50px; }
Final result:
 
Logged Logged  
  The administrator has disabled public write access.
#6518
LN Webdesign
Fresh Boarder
Posts: 14
User Offline
Re:Table Karma: 0  
 
Logged Logged  
  The administrator has disabled public write access.
#6519
John Dagelmore
Admin
Posts: 3746
User Online Now
Re:Table Karma: 80  
I see that you have tables with different CSS class, 'style1', 'brochure'.
So you have to repeat this for other classes too.
 
Logged Logged  
  The administrator has disabled public write access.
#6521
LN Webdesign
Fresh Boarder
Posts: 14
User Offline
Re:Table Karma: 0  
I added:
table.style2 td img { min-width: 50px; }
table.style2 td { padding: 0; margin: 0; }
table.style2 p, table.style8 span { font-size: 9px !important; padding: 0; margin: 0; }
table.brochure td img { min-width: 50px; }
table.brochure td { padding: 0; margin: 0; }
table.brochure p, table.style8 span { font-size: 9px !important; padding: 0; margin: 0; }
table.style1 td img { min-width: 50px; }
table.style1 td { padding: 0; margin: 0; }
table.style1 p, table.style8 span { font-size: 9px !important; padding: 0; margin: 0; }
table.style8 td img { min-width: 50px; }
table.style8 td { padding: 0; margin: 0; }
table.style8 p, table.style8 span { font-size: 9px !important; padding: 0; margin: 0; }

But i only see the changes on the style8 table?

Regards, Lars
 
Logged Logged  
  The administrator has disabled public write access.
#6522
John Dagelmore
Admin
Posts: 3746
User Online Now
Re:Table Karma: 80  
Some duplicated styles are wrong, you have to change both before and after the comma:
table.style2 p, table.style2 span { font-size: 9px !important; padding: 0; margin: 0; }
... etc ...

Moreover you have probably forgot to add the additional CSS selectors to the configuration parameter as in the previous screenshot.
 
Logged Logged  
  The administrator has disabled public write access.
#6523
LN Webdesign
Fresh Boarder
Posts: 14
User Offline
Re:Table Karma: 0  
Hi again.

It should be like this:
table.style2 td img { min-width: 50px; }
table.style2 td { padding: 0; margin: 0; }
table.style2 p, table.style2 span { font-size: 9px !important; padding: 0; margin: 0; }
table.brochure td img { min-width: 50px; }
table.brochure td { padding: 0; margin: 0; }
table.brochure p, table.brochure span { font-size: 9px !important; padding: 0; margin: 0; }
table.style1 td img { min-width: 50px; }
table.style1 td { padding: 0; margin: 0; }
table.style1 p, table.style1 span { font-size: 9px !important; padding: 0; margin: 0; }
table.style8 td img { min-width: 50px; }
table.style8 td { padding: 0; margin: 0; }
table.style8 p, table.style8 span { font-size: 9px !important; padding: 0; margin: 0; }

and this?
table.style8,table.style1,table.style2,table.brochure

I see some effect. However, when i view in device emulator, its not all good yet.

Regards, Lars
 
Logged Logged  
  The administrator has disabled public write access.
Go to top