[MGNLUI-6528] Fix buggy responsive behaviours Created: 26/Jan/21  Updated: 14/Mar/22

Status: Open
Project: Magnolia UI
Component/s: None
Affects Version/s: None
Fix Version/s: None

Type: Bug Priority: Neutral
Reporter: Anja von Gunten Assignee: Unassigned
Resolution: Unresolved Votes: 0
Labels: ui-bug
Remaining Estimate: Not Specified
Time Spent: Not Specified
Original Estimate: Not Specified

Attachments: PNG File Screenshot 2020-12-01 at 10.06.49.png     PNG File Screenshot 2020-12-01 at 10.06.53.png     PNG File Screenshot 2020-12-01 at 10.07.35.png     PNG File Screenshot 2020-12-01 at 10.08.11.png     PNG File Screenshot 2020-12-01 at 10.08.17.png     PNG File Screenshot 2020-12-01 at 10.08.32.png     PNG File Screenshot 2020-12-01 at 10.08.41.png     PNG File Screenshot 2020-12-01 at 10.09.03.png     PNG File Screenshot 2020-12-01 at 10.09.32.png     PNG File Screenshot 2022-03-14 at 12.45.49.png     PNG File pageChooser-marketingsTags-lowres.png     PNG File pageChooser-marketingsTags.png    
Template:
Acceptance criteria:
Empty
Task DoD:
[ ]* Doc/release notes changes? Comment present?
[ ]* Downstream builds green?
[ ]* Solution information and context easily available?
[ ]* Tests
[ ]* FixVersion filled and not yet released
[ ]  Architecture Decision Record (ADR)
Bug DoR:
[ ]* Steps to reproduce, expected, and actual results filled
[ ]* Affected version filled
Epic Link: UI bugs

 Description   

Status

Magnolia UI currently has 2 breakpoints for 3 resolutions implemented.

  • tablet (<1200)
  • laptop / desktop (1200-1600)
  • wide screen / monitor (>1600)

See also these links for further references

https://app.zeplin.io/project/5acc848ede054e0a4865f805/dashboard?seid=5acc9f98a512b487476f970d

https://jira.magnolia-cms.com/issues/?jql=labels%20%3D%20responsive-design

Problem

When resizing the browser window there still are a lot of visual glitches (see attached screens). To tackle the problem we need to split the tasks into 3 steps.

Design guidelines (avongunten)

  • Verify that we defined the right break points (feedback from Christian / Training)
  • Check if we need more than 2 break points
  • Provide coherent design guidelines for the 3 resolutions

Implementation (developer)

  • Check if the right breakpoints are in place for all pages and templates
  • Apply the design guidelines correctly

Testing

  • Do quality check and testing on different browsers

 

 

 


Generated at Mon Feb 12 09:37:23 CET 2024 using Jira 9.4.2#940002-sha1:46d1a51de284217efdcb32434eab47a99af2938b.