#1
  1. A Change of Season
    Devshed Loyal (3000 - 3499 posts)

    Join Date
    Mar 2004
    Location
    Next Door
    Posts
    3,400
    Rep Power
    221

    Convert table to div


    Hi;


    The table on desktop and big screen it looks good.

    I want to convert the table to div so on phone the users see the listings and the details properly rather than this mess.

    Here is the page. If you resize it or check it on phone it looks bad.

    Thanks
  2. #2
  3. Impoverished Moderator
    Devshed Supreme Being (6500+ posts)

    Join Date
    Mar 2007
    Location
    Washington, USA
    Posts
    16,700
    Rep Power
    9646
    You have Bootstrap so use their grid system. Use the .col-X-Y classes to reformat the "table" for smaller displays, like by collapsing all the columns into individual rows with .col-md-3.col-12 meaning medium-width displays have the column at 25% and smaller displays have the column at 100%.
  4. #3
  5. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,122
    Rep Power
    4308
    Why change the markup? Why not just override the display properties on the table rows and table cells (e.g. set them to "block") for small viewports? You can even float some of the cells or give them "display:inline-block", if you don't want it all in just one column.

    The markup that needs changing most is the overuse of the <h1> element. Those website ratings don't even make sense as headings.
    Spreading knowledge, one newbie at a time.

    Learn CSS. | PHP includes | HTML Validator | CSS validator

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).

IMN logo majestic logo threadwatch logo seochat tools logo