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 shift 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 rearange Heading.
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 not sure how of approach that is, it seems like it would have issues to, 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 as 3 collumns.