search

pennions / JESS

Stylesheet influenced by Pico CSS and Fluent UI from microsoft
https://pennions.github.io/JESS
MIT License
2 stars 0 forks source link

Margin class + flex-layout results in horizontal scrolling #33

Closed antonieIPR closed 1 year ago

antonieIPR commented 1 year ago

When adding a margin to a child element like this:

<body>
   <div class="flex-layout">
      <div class="m-1">Some child element</div>
   </div>
<body>

..my viewport gets a horizontal scrollbar, because the element is >100% of the width of the <body>.

jelmerveen commented 1 year ago

what would you want to happen? You can use the gap utility.

antonieIPR commented 1 year ago

I expected that the child element was going to be 'pushed' inward. Will try the gap utility and report back.

jelmerveen commented 1 year ago

it works properly. One thing to realize is that there is a different system than bootstrap.

m-1 is the smallest. m-5 is the biggest. and there are incremental steps.

Each version has a number ranging from 0 and 5 and auto. 0 means no padding or margin for that direction.

1 is the default distance divided by 3 (so 1.5rem / 3 = 0.5rem) 2 is the default distance - the distance of one (so 1.5rem - 0.5rem = 1rem) 3 is the default distance 4 is the default distance times one and a halve. (1.5rem 1.5 = 2.25rem) 5 is the default distance times two. (1.5rem 2 = 3rem)

https://pennions.github.io/JESS/#/utility-classes

antonieIPR commented 1 year ago

All clear