Having trouble keeping my page mobile responsive

First here is a link to my codepen:

I am on an iPhone 5S.

There are 2 working sections on the pen.
section 1 : what is React
section 2: What is JSX

When I click on “what is JSX” the responsiveness from the page seems to go away. But when I click on the link “what is React” the page shrinks to fit my phone size.

Is there something in my Jquery code or anywhere else that is making that happen?

It is not responsive, because you are using fixed widths specified in pixels instead of percentages.

Since you are using Bootstrap, why not try using it’s Grid System to your advantage?


Hey Randel,

I know what you mean. I did not implement rows or the column sizes for any of my elements. I do plan to implement rows div and column sizes later.

When the content first loads the default section does resize on my iphone 5s. As soon as i click on the other link the text does not seem to resize for mobile viewing.

Why does it work on one section and not the other?

The other problem that i cant seem to figure out is why the page glitches so much when scrolling. Again this only happens in mobile view when scrolling down on the “What is JSX” nav link