freeCodeCamp: Code Block Styling Escapes Parent

Page with issue: https://www.freecodecamp.org/learn/data-visualization/data-visualization-projects/visualize-data-with-a-bar-chart

I think there were some recent CSS changes, and they might have caused this:

I am going to open this up to first timers, as it should be a small change to a code element within the #description element.

An issue with the help wanted or first timers only label is open for contribution. The first comprehensive PR created will be reviewed and merged. We typically do not assign issues to anyone other than long-time contributors.

If you would like to contribute, and have not read the contributors docs, please do so here: https://contribute.freecodecamp.org/#/

If you have any issues with contributing, be sure to join us on the contributors channel, or on the contributors sub-forum

About this issue

Original URL
State: closed
Created 3 years ago
Comments: 22 (16 by maintainers)

Most upvoted comments

@ShaunSHamilton, @NinjaInShade Thanks for the correction. I meant horizontally and updated the comment accordingly.

@PatrickFranz, that is a really good point and I see other tech-ed sites are doing it such as the following: Screen Shot 2021-03-12 at 9 52 06 AM

The issue is that wrapping would lead to incorrect syntax in some instances. As seen above the one line comment is a multi line comment due to wrapping.

I think stack overflow handles it pretty well. Screen Shot 2021-03-12 at 10 04 08 AM

So we would need scroll horizontally and style the scroller to make it obvious that the code is scrollable(on mac) and we don’t get windows default scrollers.

ahmaxed on Mar 12, 2021

It should scroll vertically instead of wrapping similar to https://www.freecodecamp.org/learn/scientific-computing-with-python/python-for-everybody/dictionaries-common-applications

@ahmadabdolsaheb I do not see it scrolling vertically? I see it scrolling horizontally.

ShaunSHamilton on Mar 11, 2021

It should scroll vertically instead of wrapping similar to https://www.freecodecamp.org/learn/scientific-computing-with-python/python-for-everybody/dictionaries-common-applications.

Nothing scrolls vertically there? The code tags just wrap.

NinjaInShade on Mar 11, 2021

Should/could we create a new issue for the new occurrence, that @ShaunSHamilton has pointed out, so that another first time contributor could give it a go?

Maybe-NSA on Mar 10, 2021

@tiagogomes772 Thanks for your interest in contributing. This issue is likely to be closed by the linked, open PR. So, I encourage you to look at contributing to other issues with either the help wanted or first timers only labels.

The contributors docs are linked in the original post of this issue, as well as info on how to get help, if you get stuck.

ShaunSHamilton on Mar 9, 2021

Just took a look at this issue and I’m not able to replicate the problem. The <code> element looks like it should on Chrome (88.0.4324.182 (Official Build) (64-bit) The problem appears when the screen width is less than 1200px.

Sembauke on Mar 8, 2021