How do I make my CodePen mobile responsive?

1

I’m beginning to get a handle on css and html but one thing I don’t know how to do is get my pages to be responsive in mobile?

Here is an example: https://codepen.io/willruz/pen/yJXYxq How do I get that page for example to be responsive?

2

By using Bootstrap library they way you should us it your stuff should be mobile responsive out of the box. That’s what Boostrap is made for.
Maybe I have got your question wrong. If so, pls. clarify.

3

I’ve been using Boostrap to divide the page into columns but is there any particular code I should be using to make it mobile responsive?

4

right off the bat I see that you have not added responsive classes to some of your elements such as .img-responsive to your <image> elements and .text-responsive to your various text elements. Those tell the Bootstrap css that you want those elements to be responsive. This is always necessary, even when you nest your elements inside columns inside rows.

This playlist helped me a great deal about understanding the fundamentals of responsive design with boostrap. Especially the tutorial where he explains exactly how the grid system works.

4 Likes
5

Thanks for the reco! I’ll check those videos out and will add the the responsive classes to the html.

1 Like