Issue with "Publishing your website": …

[mrchrisadams]

MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website

What information was incorrect, unhelpful, or incomplete?

I was helping a new learner take some early steps with HTML, when I noticed there is some distortion on images which is confusing for beginners, and makes the text in some of the very difficult to read.

See the examples below:

Specific section or headline?

Every screenshot that is wrapped in a <p> tag seems to have this.

What did you expect to see?

I expected to see images that were not distorted.

From what I can see in the inspector, this appears to caused by the following css code:

.article dl, .article ol, .article p, .article ul {
    max-width: 42rem;
    max-width: 75ch;
}

Which, I think is caused by this snippet in the index.scss file here ( I don't know where the actual scss file is to point to, sorry)

p,
  ul,
  ol,
  dl {
    @include readable-line-length();
  }

If I deactivate the max-width rules above (ie. ones referenced by these selectors .article dl, .article ol, .article p, .article ul), then the images are easier to read once again.

This makes me think that the readable-line-length(); is the cause of this problem, but I'm not familiar enough with the codebase to be sure - but hopefully this at least gives some pointers on how to resolve this issue.

I'd be up for contributing the fix myself, if I you could point me to where I might make a pull request, but two things stopped me

1. I couldn't easily find the index.scss file when I did a search for index.scss of the mdn repo:

https://github.com/mdn/content/find/main

2. I am not sure what else on the site making a change would impact.

Anyway, hope that helps.

Did you test this? If so, how?

MDN Content page report details

* Folder: `en-us/learn/getting_started_with_the_web/publishing_your_website` * MDN URL: https://developer.mozilla.org/en-US/docs/Learn/Getting_started_with_the_web/Publishing_your_website * GitHub URL: https://github.com/mdn/content/blob/master/files/en-us/learn/getting_started_with_the_web/publishing_your_website/index.html * Report started: 2021-01-04T07:15:49.737Z

[chrisdavidmills]

Thanks @mrchrisadams ! Yeah, this is a known problem, and one which our devs are working on already.

@peterbe @schalkneethling which is the original issue to dupe this one against?

[peterbe]

Truth be told, I don't know but I know it gets solved with https://github.com/mdn/yari/pull/2251 which I hope we can merge in a matter of days.