Making a table of images reactive on mobile

  • Unknown's avatar
    jessicarguest1 · Member ·

    Hi there, I am duplicating the font folio home page in a static page (test 3 page) so that I don’t have to use the post/blog function.

    http://jessicarguest.wordpress.com
    http://jessicarguest.wordpress.com/test-3/

    I have managed to replicate the layout with the use of a table but unfortunately it won’t react in the same way as the post home page on mobile. The whole set of images just shrink. They don’t sit nicely under one another on tiny screens. Does anyone know what code I can use and the start/front/middle of the table to make it reactive????? Please note I’ve used placement images but they will be set to correct sizes etc.

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

  • Unknown's avatar
    jessicarguest1 · Member ·

    The code I have used: 

    <table style="max-width:100%;">
<tbody>
<tr>
<td style="max-width:50%;vertical-align:top;padding:0;border:none;" rowspan="2"><a href="http://jessicarguest.files.wordpress.com/2014/01/dm-head-shot-bw-31.jpg"><img title="vertical-align:top size-full wp-image-52" alt="DM Head Shot BW 3" src="http://jessicarguest.files.wordpress.com/2014/01/dm-head-shot-bw-31.jpg?w=562" /></a></td>
<td style="max-width:25%;vertical-align:top;padding:0;border:none;"><a href="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg"><img title="vertical-align:top size-full wp-image-181" alt="Joes-Salon-London" src="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg" /></a></td>
<td style="max-width:25%;vertical-align:top;padding:0;border:none;"><a href="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg"><img title="vertical-align:top size-full wp-image-181" alt="Joes-Salon-London" src="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg" /></a></td>
</tr>
<tr>
<td style="max-width:25%;vertical-align:top;padding:0;border:none;"><a href="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg"><img title="vertical-align:top size-full wp-image-181" alt="Joes-Salon-London" src="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg" /></a></td>
<td style="max-width:25%;vertical-align:top;padding:0;border:none;"><a href="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg"><img title="vertical-align:top size-full wp-image-181" alt="Joes-Salon-London" src="http://jessicarguest.files.wordpress.com/2014/01/joes-salon-london1.jpg" /></a></td>
</tr>
</tbody>
</table>
  • The topic ‘Making a table of images reactive on mobile’ is closed to new replies.