# My Codepen is not responsive - HELP **URL:** \ **Category:** General\ **Created:** [October 10, 2016, 6:33pm UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285 "2016-10-10T18:33:58Z")\ **Posts on this page:** 14\ **Page:** 1
**Author:** ![JoeKooner](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joekooner/32/19934_2.png) [@JoeKooner](https://forum.freecodecamp.org/u/JoeKooner)\ **Post date:** [October 10, 2016, 6:33pm UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285/1 "2016-10-10T18:33:58Z")
Hi everyone, here is a link to my tribute page. As you can see, when you alter the width of the browser window, my page is not responsive. How can I set this up within codepen? Here is a link to my [codepen tribute page](http://codepen.io/joekooner/full/XjELWK/) ---
**Author:** ![bilgiprog](https://avatars.discourse-cdn.com/v4/letter/b/3d9bf3/32.png) [@bilgiprog](https://forum.freecodecamp.org/u/bilgiprog)\ **Post date:** [October 10, 2016, 6:50pm UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285/2 "2016-10-10T18:50:05Z")
Adding bootstrap does not automatically make your page responsive, you also have to make use of its grid system and css classes (as described in Responsive Design with Bootstrap challenge set). However you’re using custom CSS and it does not seem to be responsive (missing media queries). You also should not be using html, link, body tags in Codepen, they’re automatically provided. ---
**Author:** ![JoeKooner](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joekooner/32/19934_2.png) [@JoeKooner](https://forum.freecodecamp.org/u/JoeKooner)\ **Post date:** [October 10, 2016, 6:55pm UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285/3 "2016-10-10T18:55:21Z")
I see. So, what would I have to do to make it responsive, would I have to remove the html and body html elements? ---
**Author:** ![JacksonBates](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jacksonbates/32/123402_2.png) [@JacksonBates](https://forum.freecodecamp.org/u/JacksonBates)\ **Post date:** [October 10, 2016, 11:15pm UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285/4 "2016-10-10T23:15:05Z")
Check this out. It should help explain Bootstrap: > **[The Bootstrap Grid System Explained](https://forum.freecodecamp.org/t/the-bootstrap-grid-system-explained/24479)** > > A nice, detailed explanation of the Bootstrap grid system from Medium: https://medium.com/wdstack/how-the-bootstrap-grid-really-works-471d7a089cfc?source=linkShare-8f91301d8667-1470037945 ---
**Author:** ![JoeKooner](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joekooner/32/19934_2.png) [@JoeKooner](https://forum.freecodecamp.org/u/JoeKooner)\ **Post date:** [October 10, 2016, 11:47pm UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285/5 "2016-10-10T23:47:34Z")
Thanks Jackson, I’ll definitely read this. I think my problem was that after I finished the Bootstrap module in FCC, I jumped to Codecademy to learn more HTML and CSS and then when I came back to do my tribute page, I completely forgot to include the principles of Bootstrap to my project. Currently, I am researching and learning more of bootstrap so I can improve my tribute page and learn how to apply these fundamentals in the future. ---
**Author:** ![JoeKooner](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joekooner/32/19934_2.png) [@JoeKooner](https://forum.freecodecamp.org/u/JoeKooner)\ **Post date:** [October 12, 2016, 6:06pm UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285/6 "2016-10-12T18:06:44Z")
Hi Jackson, I just updated the tribute page and it is 99% done. It is responsive and works well when the window is shrunken down (mobile view). However, when I access it on my phone (iphone 6 plus), it doesn’t look good. I can still move horizontally the page horizontally with my fingers and the footer also doesn’t look good. Any help? [Updated Tribute Page](http://codepen.io/joekooner/pen/GjdgkR/) ---
**Author:** ![kungule](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kungule/32/164723_2.png) [@kungule](https://forum.freecodecamp.org/u/kungule)\ **Post date:** [October 12, 2016, 6:09pm UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285/7 "2016-10-12T18:09:25Z")
I can’t get to your codes. Maybe the link is broken… ---
**Author:** ![JoeKooner](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joekooner/32/19934_2.png) [@JoeKooner](https://forum.freecodecamp.org/u/JoeKooner)\ **Post date:** [October 12, 2016, 6:10pm UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285/8 "2016-10-12T18:10:56Z")
You should be able to. Here, I’ll embed it here [http://codepen.io/joekooner/pen/GjdgkR/](http://codepen.io/joekooner/pen/GjdgkR/) ---
**Author:** ![kungule](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kungule/32/164723_2.png) [@kungule](https://forum.freecodecamp.org/u/kungule)\ **Post date:** [October 12, 2016, 6:22pm UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285/9 "2016-10-12T18:22:45Z")
I first suggest put all your codes inside a div with class=“container”. Secondly, use Bootstrap techniques to bring about a responsive tribute page. ---
**Author:** ![JoeKooner](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joekooner/32/19934_2.png) [@JoeKooner](https://forum.freecodecamp.org/u/JoeKooner)\ **Post date:** [October 12, 2016, 6:28pm UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285/11 "2016-10-12T18:28:54Z")
If you look at my recent post, you’ll see my tribute page is using bootstrap, rows, columns. Is there something specific in my code you can help me with and explain why I made the specific error? ---
**Author:** ![kungule](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/kungule/32/164723_2.png) [@kungule](https://forum.freecodecamp.org/u/kungule)\ **Post date:** [October 12, 2016, 6:32pm UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285/12 "2016-10-12T18:32:20Z")
You forgot closing those two divs nesting your footer at the bottom. ![](https://global.discourse-cdn.com/freecodecamp/original/3X/a/9/a9c44b7f0102ce53de687f9966200309c777f621.png) ---
**Author:** ![JoeKooner](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joekooner/32/19934_2.png) [@JoeKooner](https://forum.freecodecamp.org/u/JoeKooner)\ **Post date:** [October 12, 2016, 6:34pm UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285/13 "2016-10-12T18:34:22Z")
Whoops! Just closed them. However, it didn’t fix my problem when viewing it on my iphone. ---
**Author:** ![JoeKooner](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/joekooner/32/19934_2.png) [@JoeKooner](https://forum.freecodecamp.org/u/JoeKooner)\ **Post date:** [October 12, 2016, 6:45pm UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285/14 "2016-10-12T18:45:40Z")
I think it has to do with my elements spilling over because I had to use overflow-x: hidden; in my body CSS, any idea? ---
**Author:** ![jwilkins.oboe](https://sea3.discourse-cdn.com/freecodecamp/user_avatar/forum.freecodecamp.org/jwilkins.oboe/32/179497_2.png) [@jwilkins.oboe](https://forum.freecodecamp.org/u/jwilkins.oboe)\ **Post date:** [January 16, 2021, 5:30am UTC](https://forum.freecodecamp.org/t/my-codepen-is-not-responsive-help/44285/15 "2021-01-16T05:30:27Z")
Closed on January 16, 2021, 5:30am UTC