# Making code wrap and how to indent footnote for technical documentation project

**URL:** <https://forum.freecodecamp.org/t/making-code-wrap-and-how-to-indent-footnote-for-technical-documentation-project/323048>\
**Category:** General\
**Created:** [October 20, 2019, 7:35am UTC](https://forum.freecodecamp.org/t/making-code-wrap-and-how-to-indent-footnote-for-technical-documentation-project/323048 "2019-10-20T07:35:10Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![jacobrford](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jacobrford/32/126942_2.png) [@jacobrford](https://forum.freecodecamp.org/u/jacobrford)\
**Post date:** [October 20, 2019, 7:35am UTC](https://forum.freecodecamp.org/t/making-code-wrap-and-how-to-indent-footnote-for-technical-documentation-project/323048/1 "2019-10-20T07:35:10Z")

</div>

[https://codepen.io/jacobrford/pen/JjjbGOB](https://codepen.io/jacobrford/pen/JjjbGOB)

What is the best way to make the code section start a second line when the width is at 400px?  
In my phone, this part:  
“Type “help”, “copyright”, “credits” or “license” for more information.” …sticks out the side and makes it so you have to scroll horizontally. Is there a good way to make it wrap to a second line so you don’t have to scroll?

Also, in my footnote, I’ve used a really sloppy method of getting both lines of the text to indent after the “[1]”. I was trying to make it look the way it does on [https://docs.python.org/3/tutorial/interpreter.html](https://docs.python.org/3/tutorial/interpreter.html).  
I’m curious if there’s a better way to do this. I couldn’t seem to figure out a better method than what I’ve got after trying for quite a while.

Thanks in advance.

---

<div class="post-metadata">

**Author:** ![kevcomedia](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kevcomedia/32/125737_2.png) [@kevcomedia](https://forum.freecodecamp.org/u/kevcomedia)\
**Post date:** [October 20, 2019, 8:14am UTC](https://forum.freecodecamp.org/t/making-code-wrap-and-how-to-indent-footnote-for-technical-documentation-project/323048/2 "2019-10-20T08:14:32Z")

</div>

Many code examples I see on the web uses horizontal scrollbars to contain code snippets with long lines. In fact the Python documentation does it too:

![Screenshot_20191020_161008](https://global.discourse-cdn.com/freecodecamp/original/3X/c/8/c8841abcb50ab511c9074f0e8d8e587d8c724723.png)

Adding `overflow-x: auto` to the code elements should do it.

You can fix the width issues by removing the `min-width` and the `padding-right` properties.

---

<div class="post-metadata">

**Author:** ![ILM](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/ilm/32/363239_2.png) [@ILM](https://forum.freecodecamp.org/u/ILM)\
**Post date:** [January 16, 2021, 5:02pm UTC](https://forum.freecodecamp.org/t/making-code-wrap-and-how-to-indent-footnote-for-technical-documentation-project/323048/3 "2021-01-16T17:02:54Z")

</div>

Closed on January 16, 2021, 5:02pm UTC