Hardcoded calendar table cell widths and responsive design

Squiz Matrix Support
1

Hi everyone,

 

Has anyone managed to do a sucessful responsive design for a monthly calendar layout?

 

I've just had an email from a designer who's working on a new responsive design for one of our sites, and he's got a problem with the calendar table, because it has hard-coded px widths for the table cells.

 

If I set those widths as blank, when I comit they turn into 0px which is what then appears in the html.

 

Its a longshot, as I'm guessing the hardcoded px widths are there until Labs develop a change to that functionality in a future upgrade.

The only workaround I can think of at the moment is to have the monthly calendar in one div, and below that have an upcoming events list (formatted as a UL with lovely responsively styles LIs) below that, and use the media queries to hid the calendar at narrower screen sizes and show the list view instead.

 

Any comments / ideas welcome!

Thanks, Charlie.

2

Hi Charlie,

 

I'm sure you can you achieve this with the CSS !important property and set it to percentage instead.

If percentage doesn't work properly you can set 3 or 4 different PX width state depending on the resolution of the browser.

 

An example code with 1000px table :

 

table {width: 1000px !important;}
table td {width: 14% !important;}

You can set the table to 100% and it will stretch to the containing element. The reason for setting 14% is I'm using monthly calendar so 100 / 7 = 14.28 and rounded to the nearest non decimal number.

3

I'm sure you can you achieve this with the CSS !important property and set it to percentage instead.

If percentage doesn't work properly you can set 3 or 4 different PX width state depending on the resolution of the browser.

 

An example code with 1000px table :

 

table {width: 1000px !important;}
table td {width: 14% !important;}

 

Yeah, depending on the css specificity you might need to even add an additional selector on there that is surrounding the table so that is has a higher specificity, e.g.:

 

 



#wrapperDiv table {width: 1000px !important;} 
#wrapperDiv table td {width: 14% !important;}