UI of many pages showing inconsistencies on different screen sizes.

[apsinghdev]

Description

When testing UI of different screen sizes, it's showing some inconsistencies.

Current Behavior

Home page of the website on iPad screens

Product page on iPhone screens

Expected Behavior

Ideally, the components of the whole UI should adjust according to the screen sizes so that the UI of the page doesn't break.

List of components that are breaking on screen size change (page by page)

• Home page
  • text is coming out from the Revenue, Active Subscriptions, and Finance cards
  • unnecessary horizontal scrollbar in the sidebar and home page
• Products
  • New Benefit in Benefits collides with Overview.
  • No space between Products and Overview headings
  • Description collides with Markdown format in the Edit Product section
• Storefront
  • Subscriptions card in storefront becomes too small to see what it contains
  • Support section of the footer going right of the screen creating an unnecessary horizontal scrollbar
  • inconsistent margin of Manage Subscriptions of the Portal of Storefront
  • Confirmation section of Storefront

I can observe many inconsistencies and will add to this list.

Environment:

• Operating System: macOS
• Browser (if applicable): Chrome

---

@frankie567 Please look at this ticket and let me know if it makes sense. I am interested in making the UI responsive to all screen sizes.

[frankie567]

Thank you for the detailed research, @apsinghdev 👍 I think @emilwidlund will be more competent than me on this subject 😄

[apsinghdev]

Thank you for the detailed research, @apsinghdev 👍 I think @emilwidlund will be more competent than me on this subject 😄

Thanks! There are inconsistencies that can be solved by minimising/folding the text, minimising the margins/paddings, adding breakpoints etc while some inconsistencies will probably require rethinking of design. I can list down all such occurrences if @emilwidlund wants.