Text Editor Responsive Styles

Layout Tables

Tables can be organised into groups of 2 or 3 columns and sized as required on the desktop version of the site. Colspan and Rowspan should not be used for padding or layout as they will interfere with the respsonsive layouts.

In order to make a table responsive. Use the source code editor <> add one of the tags in the list below to the source code of the opening <table> tag. For example to create a 3 column grid you would use: <table id="RD-rte-table-3col">, this will have no effect on the desktop layout but will ensure that the table collapses elegantly for mobile users.

• Three column grid. Add this tag to the table <table id="RD-rte-table-3col">
• Two column grid, equal column widths 50/50. Add this tag to the table <table id="RD-rte-table-2col">
• Two column grid, unequal column widths 70%/30%. Add this tag to the table <table id="RD-table-2col-right">
• Two column grid, unequal column widths 30%/70%. Add this tag to the table <table id="RD-table-2col-left">

One Column Mobile Layout

If you would like the final mobile design to appear in one column rather than two an additional tag is required: <table id="RD-rte-table-3col" class="RD-mobile-1col">

Events Layout

Some events pages use a 3 column grid with navigation in the 3rd column. You can use this tag <table id="RD-event-table"> to create this layout. However, I would recommend that these pages are rebuilt as templates to make the process simplier.

Data Tables

The above method of organising information is only appropriate for layout and not tabular data for which standard tables should be used. Data tables can use any table layout methods such as colspan or rowspan and as many columns as required. Adding this id tag id="RD-data-table" to a table tag <table id="RD-data-table"> will improve the default styling but will not effect the table layout.

YouTube Videos

YouTube embed codes are not respsponsive by default so an additional line of code is required to wrap the embed code: <div class="RD-youtube-embed"> YOUTUBE EMBED HERE </div>

Tables: 3 Column layout - id="RD-rte-table-3col"

Tables: Two column Grid 50/50 - id="RD-rte-table-2col"

Tables: Two column Grid 30/70- id="RD-table-2col-right"

Professor Gurminder K Bhambra is BSA President.  Gurminder is Professor of Postcolonial and Decolonial Studies and Director of Research and Knowledge Exchange at the University of Sussex. Professor Bhambra’s term of office runs from 1 January 2022 until 31 December 2024.

Tables: Two column Grid 70/30- id="RD-table-2col-left"

Professor Gurminder K Bhambra is BSA President.  Gurminder is Professor of Postcolonial and Decolonial Studies and Director of Research and Knowledge Exchange at the University of Sussex. Professor Bhambra’s term of office runs from 1 January 2022 until 31 December 2024.

Tables: Event Table with right-side column - id="RD-event-table"

Tables: Data-Table with styling css - id="RD-data-table

YouTube Video - class="RD-youtube-embed"