To do this properly, you really need to give each half a CSS class, and define the class in a CSS file so that you can make it responsive. Something like this:

<div class="half-width"> .... </div>
<div class="half-width"> .... </div>

Then add this to the Rentalot Plus CSS: /media/com_rentalotplus/css/rentalotplus_base.css

.half-width {float:left; margin:0 10px; width:calc(50% - 20px)}

@media screen and (max-width:1200px) {
.half-width {float:none; margin:0 5px; width:100%}

On large screens you'll get the tables side-by-side. Experimenting on your site I found that only really works properly above 1200px width. So below 1200px, the media query removes the float and the width restriction.


My actual css for South France

<div class="half-width"><strong>LA CRESSONIERRE (Sleeps 8)</strong> {rentalot_plus view=classic unit_id=1}</div>

<div class="half-width"><strong>LE PRESBYTERE (Sleeps 6)</strong> {rentalot_plus view=classic unit_id=2}</div>


Joomwalker is not affiliated with or endorsed by the Joomla Project or Open Source Matters.
The Joomla name and logo are used under a limited license granted by Open Source Matters the trademark holder in the United States and other countries.