Search code examples
htmlcsshtml-tableflexboxcss-grid

Which Methods/How to replicate this "Price Compare" responsive card layout?

plan comparison desktop:

plan comparison mobile:

Hi,

I am looking for some ideas on ways to design this section of the layout. This section is both in desktop version and mobile (pictures above)

It price comparison price "table ?". I am not just thinking how to do this, but how screen reader will read this.

So the big distinctions between desktop and mobile is that "Compare Plans" heading shifts up, and in its place is now an empty space, also spaces between column shrink to a certain distance and the scroll is activated.

My initial approach was 3 columns nested inside a bigger container and grid or flex used. It did raise some concerns like the problem creating continuous border bottom on some rows and and also not sure how to rearrange the headings.

Then I received a suggestion of not nesting any elements and just arranging all elements inside the parent container as is and to use grid on the items and to redefine in which grid cell the position of "compare plans" will be, for the smaller version using media queries.

I am not sure how good this approach is, and if it will give problems for screen readers because of lacking HTML structure.

I also considered making a table, but I'm not sure how of approach that is, it seems like it would have issues too, especially with rearranging the heading in the mobile version.

I would really appreciate some suggestions please.

Thank you.

I have tried to structure my layout in three columns.

Solution

  • Create the 'Compare Plans' heading above the table. Inside the table you include the 'Compare Plans' heading in the first <th>.

    <h2 class="headingMobile">Compare Plans</h2>
<table>
   <th>
       <h2 class="headingPC">Compare Plans</h2>
   </th>
   <th> basic..</th>
...

    Apply styling as needed to remove the spacing and so on.

    Then in a media-query you would apply display: none; to hide/show depending on the heading you want to display.

    You could also use visibility property with pointer: none but the elements would still be in the DOM but most screen-readers would respect this.