search

mdn / css-examples

Code examples that accompany the MDN CSS documentation
https://developer.mozilla.org/en-US/docs/Web/CSS
Creative Commons Zero v1.0 Universal
604 stars 841 forks source link

[Mobile] Section border overlaps the examples #39

Open mirunacurtean opened 3 years ago

mirunacurtean commented 3 years ago
  1. On a mobile browser open https://developer.allizom.org/en-us/docs/web/css/css_flexible_box_layout/aligning_items_in_a_flex_container#Aligning_one_item_with_align-self.
  2. Scroll through the flex examples.
  3. Notice that the section border line overlaps the example itself instead of encapsulating it.

20201211_190650

ghost commented 3 years ago

They look like iframes. I didn't understand if there is another repository for those iframes right to the content.

Screenshot_20201211-200357.png

Perhaps an

Ryuno-Ki commented 3 years ago

My script blocker points me to https://mdn.github.io/css-examples/flexbox/alignment/align-self.html for the included iFrame.

ghost commented 3 years ago

Screenshot_20201213-173213.png

schalkneethling commented 3 years ago

That border is set in the example itself: https://mdn.github.io/css-examples/flexbox/alignment/align-items.html

So, it would need to be resolved there.

In fact you can see the problem here:

.box {
    width: 500px;
    border: 2px dotted rgb(96, 139, 168);
}

The fixed-width should be removed.

caugner commented 11 months ago

The fixed-width should be removed.

Sounds reasonable, here's where that's located:

https://github.com/mdn/css-examples/blob/2d33a1c5aede31cc0e15415bce708950de582675/flexbox/alignment/align-items.html#L62-L65