Divi theme - I need help converting a table to responsive divs and do not know the best method

Rob
July 23, 2019
270 views
0 votes
2 Answers

I need to convert this layout or look that is made with a table in html to Divs, I believe. The table’s structure is two columns with an image on one side and text associated with the image on the other. When squeezed small enough (like on a mobile device) I need the columns to go from two to stacked or one column. I don’t know whether I need to use breakpoints and never have… or if there’s any other better responsive solution to replicate the structure I have included below. This needs to be made in the WordPress Divi theme’s text editor.

Right now I am trying to make this work using Materialize (https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css) within this codepen. I have no idea if materialize will even work within wordpress…

Codepen
https://codepen.io/robmatthews/pen/qebwor

<table height="557" style="width: 800px; border-color: #ffffff; background-color: #ffffff; height: 702px; margin-left: auto; margin-right: auto;" border="#fff">
  <tbody>
    <tr>
      <td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
        <h2><img src="http://projectorbach.com/wp-content/uploads/2019/07/clipboard.png" width="174" height="171" alt="" class="wp-image-35671 alignnone size-full" style="display: block; margin-left: auto; margin-right: auto;" /></h2>
        <h2 style="text-align: center;"><span>Create Team Rosters</span><span></span></h2>
        <div class="col"></div>
      </td>
      <td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
        <div class="col">
          <div class="col">Easily input new clients and team rosters.</div>
          <div class="col"></div>
        </div>
      </td>
    </tr>
    <tr>
      <td style="width: 373px;"><span>Easy to create and easy to use. Our player evals are done through a grid. We start with templates based on age group and sport. Then, you can customize the skills and stats you want to track.</span></td>
      <td style="width: 373px;">
        <h2 style="text-align: center;"><span class="blue"><img src="http://projectorbach.com/wp-content/uploads/2019/07/eval.png" width="181" height="167" alt="" class="wp-image-35673 alignnone size-full" /><br /> </span><span class="blue">Evaluate Your Players</span><span></span></h2>
      </td>
    </tr>
    <tr>
      <td style="width: 373px;">
        <h2 style="text-align: center;"><img src="http://projectorbach.com/wp-content/uploads/2019/07/multisport_player.png" width="174" height="171" alt="" class="wp-image-35689 alignnone size-full" /></h2>
        <h2 style="text-align: center;">More Features</h2>
      </td>
      <td style="width: 426px;">
        <div>
          <div class="row">
            <div class="col">
              <p><span class="s1" style="font-size: 15px;"><span class="s3"></span></span>
              </p>
              <ul class="ul1">
                <li class="li1"><span class="s1">Eases communication with parents decreasing ambiguity</span></li>
                <li class="li1"><span class="s2"></span><span class="s1">Customizable evaluation criteria</span></li>
                <li class="li1"><span class="s2"><span class="Apple-tab-span"> </span></span><span class="s1">Create practice plans and share videos</span></li>
                <li class="li2"><span class="s3">Share data and progression with your club</span></li>
              </ul>
            </div>
          </div>
        </div>
        <div id="lipsum"></div>
      </td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
<p style="text-align: center;">

Answers

To change to a non-table layout you just need to structure your divs like a table. I have applied classes that make that clear.

The div with .my-wrapper is taking the place of the table itself. The div(s) with .my-row are serving as the table rows, and the ones with .my-cell are the columns/cells of the “table”.

Using flexbox we get a flexible layout that can be controlled very easily and allow you to change the layout where you want. Simply by applying:

display: flex;

…to a div, it becomes a flex container and the immediate child elements (the divs with .my-cell in this case) become flex items. I put several comments in the code below to point out what each line is doing. There are borders added just to make the layout clearer. Run the snippet and view in full page mode so you can adjust the width of your screen and see the responsive change.

Repeat the row layout to build out the rest of the table.

A great resource for more info on flexbox: https://css-tricks.com/snippets/css/a-guide-to-flexbox/

More info on media queries: https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

* {
  box-sizing: border-box;
}

.my-wrapper {
  max-width: 800px; /* use max-width instead of width to get automatic responsive flexibility */
  margin: 0 auto; /* centers the container on the page */
  border: 1px solid blue;
}

.my-row {
  display: flex; /* direction row by default, the cells will be side by side to start */
}

.my-cell {
  width: 50%;
  padding: 20px;
  display: flex; /* yep, the cells can get flexbox layout too */
  flex-direction: column; /* each cell will have its content laid out vertically */
  align-items: center; /* centers content horizontally */
  justify-content: center; /* centers content vertically */
  border: 1px solid red;
}

.my-cell img {
  max-width: 100%; /* make the images responsive too */
  height: auto;
}

@media (max-width: 500px) { /* change the max-width in the media query to whatever width you want, you can use min-width too if you prefer */
  .my-row {
    flex-direction: column; /* force the layout to stack the cells vertically */
  }
  .my-cell {
    width: 100%; /* cells should be full width at this point */
  }
}

<div class="my-wrapper">
  <div class="my-row">
  
    <div class="my-cell">
      <img src="https://picsum.photos/200/300" />
    </div>
    
    <div class="my-cell">
      <h2>Some title text</h2>
      <p>Some paragraph text...</p>
      <ul>
        <li>whatever</li>
        <li>you</li>
        <li>want</li>
      </ul>
    </div>
    
  </div>
</div>

Rob,

Adding a class to your table tag (class=responsive_table for this example) and writing a media query will stack the columns one below the other.

@media screen and (max-width: 400px) {
table.responsive_table {
  display: block;
}
  table.responsive_table td {
    width: 100%;
    display: block;
  }
}

<table height="557" style="width: 800px; border-color: #ffffff; background-color: #ffffff; height: 702px; margin-left: auto; margin-right: auto;" border="#fff" class="responsive_table">
  <tbody>
    <tr>
      <td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
        <h2><img src="http://projectorbach.com/wp-content/uploads/2019/07/clipboard.png" width="174" height="171" alt="" class="wp-image-35671 alignnone size-full" style="display: block; margin-left: auto; margin-right: auto;" /></h2>
        <h2 style="text-align: center;"><span>Create Team Rosters</span><span></span></h2>
        <div class="col"></div>
      </td>
      <td style="width: 373px; border-color: #ffffff; background-color: #ffffff;">
        <div class="col">
          <div class="col">Easily input new clients and team rosters.</div>
          <div class="col"></div>
        </div>
      </td>
    </tr>
    <tr>
      <td style="width: 373px;"><span>Easy to create and easy to use. Our player evals are done through a grid. We start with templates based on age group and sport. Then, you can customize the skills and stats you want to track.</span></td>
      <td style="width: 373px;">
        <h2 style="text-align: center;"><span class="blue"><img src="http://projectorbach.com/wp-content/uploads/2019/07/eval.png" width="181" height="167" alt="" class="wp-image-35673 alignnone size-full" /><br /> </span><span class="blue">Evaluate Your Players</span><span></span></h2>
      </td>
    </tr>
    <tr>
      <td style="width: 373px;">
        <h2 style="text-align: center;"><img src="http://projectorbach.com/wp-content/uploads/2019/07/multisport_player.png" width="174" height="171" alt="" class="wp-image-35689 alignnone size-full" /></h2>
        <h2 style="text-align: center;">More Features</h2>
      </td>
      <td style="width: 426px;">
        <div>
          <div class="row">
            <div class="col">
              <p><span class="s1" style="font-size: 15px;"><span class="s3"></span></span>
              </p>
              <ul class="ul1">
                <li class="li1"><span class="s1">Eases communication with parents decreasing ambiguity</span></li>
                <li class="li1"><span class="s2"></span><span class="s1">Customizable evaluation criteria</span></li>
                <li class="li1"><span class="s2"><span class="Apple-tab-span"> </span></span><span class="s1">Create practice plans and share videos</span></li>
                <li class="li2"><span class="s3">Share data and progression with your club</span></li>
              </ul>
            </div>
          </div>
        </div>
        <div id="lipsum"></div>
      </td>
    </tr>
  </tbody>
</table>
<p>&nbsp;</p>
<p style="text-align: center;">

You may change the breakpoint in media query where it says max-width

Please signup or login to give your own answer.

Click here to cancel reply.

Divi theme – I need help converting a table to responsive divs and do not know the best method

Answers