CSS help with homepage grid

• 

  rgustudentblog · Member · Jan 22, 2016 at 3:55 pm

  • Copy link
  • Add topic to favorites

  I would like to expand the width of the grid on my sites profile so it’s wider than 200 pixels. I would like to add images to the grid and want these images to be bigger than 180pixels.

  Thanks

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

• 

  thesacredpath · Member · Jan 23, 2016 at 6:11 am

  • Copy link

  Tables are a real challenge on responsive width themes, such as Suits. The problem is that if we have 3 or 4 columns of stuff, when we view it on a small tablet or on a phone – when the table is designed to be responsive – the 3 or 4 columns end up being too narrow to view the information in the cells.

  This article from CSS Tricks will give you some background on creating responsive width tables, but not all of what they talk about is relative to what you are doing. Also, some table related attributes are no longer supported.

  I would suggest no more than 2 columns on your table, and the opening and instead of setting a static width and height for the table, you use a style statement and set it at 100%, such as this
  table style="max-width: 100%; width: 100%;>

  I would suggest building the base of your table using the following online table generator: http://www.rapidtables.com/web/tools/html-table-generator.htm

  This would be a sample:

  <table class="my-table">
  	<tbody>
  	<tr>
  		<td> </td>
  		<td> </td>
  	</tr>
  	<tr>
  		<td> </td>
  		<td> </td>
  	</tr>
  	<tr>
  		<td> </td>
  		<td> </td>
  	</tr>
  	<tr>
  		<td> </td>
  		<td> </td>
  	</tr>
  	<tr>
  		<td> </td>
  		<td> </td>
  	</tr>
  	<tr>
  		<td> </td>
  		<td> </td>
  	</tr>
  	<tbody>
  </table>

  and this would be the accompanying CSS.

  .my-table {
  	border:0px none;
  	border-collapse:collapse;
  	padding:3px;
  }
  
  .my-table td {
  	border:0px none;
  	padding:3px;
  }