Giters

mdn / css-examples

Code examples that accompany the MDN CSS documentation

Home Page:https://developer.mozilla.org/en-US/docs/Web/CSS

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Fix width of embedded live sample preview and form controls

schalkneethling opened this issue · comments

commented

Hey @mdn/mdn-community-engagement! For the current embed live sample the width is set to 90% with a max-width of 700px. This might have worked with the previous MDN Web Docs layout, but is causing problems with some of the examples leading to confusion.

For example, even with the correct code, the following example on .. displays incorrectly:
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Multicol_skills#multicol_two

Screenshot of embedded live sample showing a two column layout when the learner will expect to see a three column layout

If we update styles.css, set the width to 100% and remove the max-width, the output is as expected.

Screenshot of embedded live sample showing the correct three column layout

With the above change, we would also need to set the form elements to 100%.