Displaying JSON data is not responsive

I’m finishing up the Metric/Imperial Converter project and just adding some styles.

When the JSON data is displayed in the view, I want it to naturally shrink and resize within its container. But for some reason the returned code is ignoring my style rules. The returned data (returned as a string), overflows its container upon resize. Any idea why this might be?

glitch project

Try giving your code element

word-break: break-word

I am not sure either why it’s trying to maintain its width.

1 Like

Awesome. Thank you for the help. I’ll try to find out why it was keeping its width and why using word-break: break-word worked. Thanks!

From what I have found, the returned JSON data that’s displayed as text is seen by the browser as one very long word. The white space inside of it is being ignored in this case because it’s all one string, so that is why word-break: break-word is necessary in this instance:
source

1 Like