mi6
Issue with margins at the top of section container
Summary of the bug
Tell us, in a few words, what the problem is. The vertical margin at the top of the section container on the website does not change size at different breakpoints - it is always stuck at 16px.
The page header also has a vertical margin at the bottom of it that creates an unnecessary gap between the page header and section container
🪜 How to reproduce
See code and use the inspect function on side navigation component page for an example
📸 Screenshots or code
This is the table which contains the margins which should be implemented for section container
🖥 📱 Device
-
Type: Desktop
-
Device: MacBook
-
Browser version: Safari 17.3
🧐 Expected behaviour
Tell us, in enough detail, what you expected to happen instead.
📝 Acceptance Criteria
If relevant, describe in full detail the different interactions and edge cases that the component or patterns needs to fulfil.
Given that the section container changes size across different breakpoints When extra small sizes are chosen or extra large sizes Then the vertical margin should be less or greater than 16px respectively
Given the page header is used on the website When it is displayed alongside other components below it Then there should not be an unnecessary margin of 24px
Additional info
Tell us anything else useful to help us fix or understand the problem.
This should be discussed with designers and the designs of the site should be reviewed. Will remove from the PR checklist work.
