How can I align texts and pictures

• 

  wikipreneurship · Member · Jun 7, 2017 at 6:48 pm

  • Copy link
  • Add topic to favorites

  Hi,
  I am trying to align texts and pictures in a responsive way for this page
  https://wikipreneurship.com/events/dublin/

  Anyone can help?

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

• 

  thesacredpath · Member · Jun 7, 2017 at 8:32 pm

  • Copy link

  Hi there, I see you are using an HTML table. What we can do is to set the width for the td elements (cells) to 50% like this.

  .table-responsive td {
  	width: 50%;
  }

  On mobile, the columns get pretty narrow and there really isn’t much we can do about that. We could add CSS classes to the td elements with the images, and the use a Media Query to set the image td widths to something like 30% and the text td elements to 70%, to allow more room for the text. If you wanted to give that a try, edit your table and in the td elements with the images, add a CSS class, like this.
  <td class="tbl-img">
  And for the td with text, like this.
  <td class="tbl-txt">
  and then add the following to your custom CSS as well as the above.

  @media screen and (max-width: 600px) {
  	.table-responsive td.tbl-img {
  		width: 25%;
  	}
  	.table-responsive td.tbl-txt {
  		width: 75%;
  	}
  }

  Let me know your thoughts or if you have any issues.