2014 Theme -Table not collapsing gracefully when viewed on phone.

Tables often cause problems of this sort.

Instead of using a table, how about using div elements with the class “alignleft” to contain each of the affiliate partners data (to float them left), and then create a class that assigns them a minimum width. That way, when the screen is too small to accommodate them all in one row, they will move down below each other to display vertically below the Affiliate Partners title?

I haven’t mimicked a table with HTML in WordPress lately, so I couldn’t resist giving it a try.

Give this HTML a shot:

<div class="alignleft affiliate-partner">
<div class="affiliate-labels">Brisbane:</div>
<div class="affiliate-data"><strong>Real Estate Pictures</strong></div><br />
<div class="affiliate-labels">Contact:</div>
<div class="affiliate-data"><strong>Adam Maurer</strong></div><br />
<div class="affiliate-labels">Phone:</div>
<div class="affiliate-data"><strong>0427 362 799</strong></div><br />
<div class="affiliate-labels">Website:</div>
<div class="affiliate-data"><a href="https://www.realestatepictures.com.au/">www.realestatepictures.com.au</a></div>
</div>
<div class="alignleft affiliate-partner">
<div class="affiliate-labels">North Brisbane:</div>
<div class="affiliate-data"><strong>Kwickclick Photographics</strong></div><br />
<div class="affiliate-labels">Contact:</div>
<div class="affiliate-data"><strong>Mark Robinson</strong></div><br />
<div class="affiliate-labels">Phone:</div>
<div class="affiliate-data"><strong>0425 899 009</strong></div><br />
<div class="affiliate-labels">Website:</div>
<div class="affiliate-data"><a href="https://www.kwikclicks.com.au/">www.kwikclicks.com.au</a></div>
</div>
<div class="alignleft affiliate-partner">
<div class="affiliate-labels">Sydney:</div>
<div class="affiliate-data"><strong>Sydney Property Shoot</strong></div><br />
<div class="affiliate-labels">Contact:</div>
<div class="affiliate-data"><strong>Robert Boccalatte</strong></div><br />
<div class="affiliate-labels">Phone:</div>
<div class="affiliate-data"><strong>0435 594 716</strong></div><br />
<div class="affiliate-labels">Website:</div>
<div class="affiliate-data"><a href="https://www.sydneypropertyshoot.com.au/">www.sydneypropertyshoot.com.au</a></div>
</div>

and add this to your child theme’s style.css:

.affiliate-partner {
	padding: 10px;
}

.affiliate-partner p {
	margin: 0;
        height: 0;
}

.affiliate-labels {
	display: inline-table;
	text-align: right;
	min-width: 105px;
}

.affiliate-data {
	display: inline;
}

Setting the margin for paragraphs was necessary because WP added some paragraphs where I had <br /> in the HTML, and that made the spacing between lines too great. The height setting for paragraphs keeps you from losing the appropriate line breaks if you save the page with the Visual tab selected.

The min-width allows your labels to right-align as you had them in the table.

Hi Linux

Just got around to implementing your code. It’s 90% there! Just that on my desktop monitor the 3 affiliate-partner blocks of data are one below the other, which is what we want it to collapse to if there is insufficient width. How to have them side-by-side across the screen?

Link https://www.propertyshoot.com/dev/?page_id=157

You have a couple of CSS things that you’ll need to change on your site to allow enough room for them to display horizontally on your theme. Change this:

.affiliate-partner {
	padding: 10px;
}

to this:

.affiliate-partner {
	padding: 5px;
        clear: none !important;
}

and you should be there.

Ah so! ?? Had to reduce the padding to 3px before all 3 blocks would line up horizontally on my monitor. Of course that 3px is also the vertical separation on smaller screens, so can’t reduce it any further.

Thanks for the CSS lesson and solutions.