My Codepen is not responsive - HELP

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

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.

I see.

So, what would I have to do to make it responsive, would I have to remove the html and body html elements?

Check this out. It should help explain Bootstrap:

1 Like

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.

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

I can’t get to your codes. Maybe the link is broken…

You should be able to.

Here, I’ll embed it here

I first suggest put all your codes inside a div with class=“container”.

Secondly, use Bootstrap techniques to bring about a responsive tribute page.

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?

You forgot closing those two divs nesting your footer at the bottom.

Whoops! Just closed them. However, it didn’t fix my problem when viewing it on my iphone.

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?

1 Like