Comparison of Plans on Desktop:
https://i.sstatic.net/fzTeOJF6.png
Mobile Plan Comparison:
https://i.sstatic.net/2FBEmdM6.png
Hello there,
I'm seeking suggestions for designing this particular section of the layout. This section is visible both in desktop and mobile versions, as shown in the images above.
It showcases a price comparison "table". I am not only exploring ways to visually present this information but also considering how it will be interpreted by screen readers.
The major differences between the desktop and mobile versions are that the "Compare Plans" heading moves up, leaving an empty space beneath it, the spaces between columns decrease to fit mobile screens, and scrolling becomes necessary.
Initially, my approach involved nesting three columns inside a larger container using grid or flex. However, I faced challenges such as inconsistent border bottoms on rows and uncertainty about rearranging headings.
Later, I received a suggestion to avoid nesting elements and simply place all items within the parent container, utilizing grid for positioning and adjusting the layout with media queries for smaller screens.
I'm unsure about the effectiveness of this approach and whether it might cause issues for screen readers due to potential HTML structure limitations.
Another consideration was incorporating a table format, but I'm uncertain about the feasibility of this method, especially when reorganizing headings for the mobile version.
I would greatly appreciate any recommendations you may have.
Thank you for your input.
I have attempted to organize my layout into three columns.