Image text grid

  • chrsschlkx

    (@chrsschlkx)


    8 years, 11 months ago

    Hi, I’ve been looking for a solution for this problem for a few days, and nothing seems to work. I’m trying to achieve this (mockup made in photoshop): http://snappyimages.nextwavesrl.netdna-cdn.com/img/60dbd2f1cc027c689649b83a29fe0c55.png

    In a post, I want to list 3 hotels – 3 images on the left, and a short title+description for each on the right – and it should be responsive (hotel image moves above each description on mobile). However, I can’t seem to figure out how to properly do this with columns and/or tables. With columns and left image alignment, it becomes a mess. Any suggestions?

    So far I’ve tried Tablepress, but I realise that the mobile solution doesn’t make sense for this case, as it just simply resizes the table as a whole instead of moving the cells in the right order: http://ricepotato.co/tables-test/

    Any help is appreciated!

    • This topic was modified 8 years, 11 months ago by chrsschlkx.
Viewing 1 replies (of 1 total)
  • Konstantinos Xenos

    (@xkon)

    8 years, 11 months ago

    Hello,

    Although I wouldn’t work with tables but with <div> instead it’s pretty much the same thing.

    You can create a vertical list of <td> by adding display: block; clear:both; to them and of course adjusting the other values like width height etc.

    The main thing here is clear: both; this means that nothing else can be in the same line with the specific element either on the left or on the right side.

    All I did was 

    .column-1, .column-2 {
    display:block !important;
    clear:both !important;
}

    Hope this helps.

    Best regards,
    Konstantinos

Viewing 1 replies (of 1 total)

The topic ‘Image text grid’ is closed to new replies.