responsive and symmetrical tables

• 

  elitepropertynetwork · Member · Oct 11, 2016 at 4:55 pm

  • Copy link
  • Add topic to favorites

  Please help…
  I am trying to to create 2 tables with 3 columns and 2 rows that are both symmetric when viewed and that are responsive too regardless of what is in the cells.

  like this page: http://www.wealthdragons.com/events/

  but just using CSS.
  please help.

  The blog I need help with is: (visible only to logged in users)

• 

  siobhyb · Member · Oct 12, 2016 at 9:39 am

  • Copy link

  Hi there,

  The theme you’re using, Corporate, was built using a twelve column grid, as explained in its documentation here:

  https://corporatethemedemo.wordpress.com/docs/the-grid/

  If you scroll down the above page, you’ll find HTML code that you can use to create columns within your own page’s HTML editor.

  For example, the following HTML defines one row of three columns that each take up an equal amount of space:

  <div class="grid">
      <div class="row">
          <div class="four column">
              Example text.
          </div>
          <div class="four column">
              Example text.
          </div>
          <div class="four column">
              Example text.
          </div>
      </div>
  </div>

  In the above HTML, replace “Example text.” with the text that you wish to appear in each column.

  You’ll also see two classes that are assigned to each column: Four and Column.

  One of the classes needs to be a number and the total number for all the columns in a row must add up to twelve.

  If you’d like for one column in a row to take up more or less space, you could increase/decrease the number accordingly. Just make sure that you increase/decrease the numbers associated with other columns in that row so everything adds up to twelve.

  The above HTML will be responsive by default.

  Let me know how you get on with that or if any questions come up.