Fixing HTML Chart

• 

  muslimahcoaching · Member · Dec 20, 2016 at 2:19 pm

  • Copy link
  • Add topic to favorites

  Hi, I made three charts and the last two are not aligned with the first one.

  https://tayyibaatwives.com/love-language-gender-comparison-chart/

  I was told to do it through CSS. One of the engineers said this:

  Instead of using the HTML “width” attribute, use width in CSS. Use percent instead of pixels, so that the table can be responsive and still display properly on various screens.

  How do I do that?

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

• 

  thesacredpath · Member · Dec 20, 2016 at 10:18 pm

  • Copy link

  Hi there, this will be a bit of work, but we can do it. The one thing to realize is that tables of this size will never work well on smaller screens/devices, such as smaller tablets and phones simple due to the fact that there is little width on those to display the tables. On phones, longer words are likely going to end up broken in the middle and in many cases there will only be one word per line.

  What you will need to do is to make the opening table HTML tag for each of the tables look like this.
  <table class="my-table">
  Next you will need to edit each opening td HTML tag and make them look like this (left for the left td, center for the center and right for the right).

  <td class="my-td-left">
  <td class="my-td-center">
  <td class="my-td-right">

  The following will be added to your custom CSS, but keep in mind that we will likely have to make adjustments to it once you have the tables updated and the CSS in.

  .my-table {
  width: 100%;
  }
  .my-td-left {
  max-width: 25%;
  width: 100%;
  }
  .my-td-center {
  max-width: 35%;
  width: 100%;
  }
  .my-td-right {
  max-width: 40%;
  width: 100%;
  }

  I would suggest creating a draft page and copy/paste your love language content into that new page (from and into the Text tab) and then keep that page as a draft and I we can work on that one to get things adjusted and ironed out.