Skip to content

[Grid] Adjust breakpoints and shell margin values #1042

@xak

Description

@xak

Some values are not correct with the latest specs

Reported differences ...
image

Specs

S

Small Screens @media (max-width:599px)
Shell & Navigation:  
Left Spacing 16px/ 1rem
Card Grid Area:  
left and right of Screen 8px/ 0.5rem
Gutter 8px/ 0.5rem
Space between groups 48px/ 3rem
Under group title (spacing same as gutter) 8px/ 0.5rem

image

M

Medium Screens @media (min-width:600px) and(max-width:1023px)
Shell & Navigation:  
Left Spacing 32px/ 2rem
Card Grid Area:  
left and right of Screen 32px/ 2rem
Gutter 16px/ 1rem
Space between groups 48px/ 3rem
Under group title (spacing same as gutter) 16px/ 1rem

image

L

Large Screens @media (min-width:1024px) and (max-width:1039px)
Shell & Navigation:  
Left Spacing 32px/ 2rem
Card Grid Area:  
left and right of Screen 32px/ 2rem
Gutter 16px/ 1rem
Space between groups 48px/ 3rem
Under group title (spacingsame as gutter) 16px/ 1rem

image

XL

X-Large Screens @media (min-width:1440px) and (max-width:1919px)
Shell & Navigation:  
Left Spacing 48px/ 3rem
Card Grid Area:  
left and right of Screen 48px/ 3rem
Gutter 16px/ 1rem
Space between groups 48px/ 3rem
Under group title (spacing same asgutter) 16px/ 1rem

XXL

XX-Large Screens @media (min-width:1920px)
XL spacing is maintained and scaled up proportionally for ultra definition XXL screens.

This is not possible with our current setup.

image

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions