css-examples icon indicating copy to clipboard operation
css-examples copied to clipboard

Published 20 hours ago • verified publisher icon mdn

Fix width of embedded live sample preview and form controls

Open schalkneethling opened this issue 2 years ago • 0 comments

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%.

schalkneethling avatar Apr 23 '22 16:04 schalkneethling