Tribute Page not responsive...?

I am having a hard time figuring out why my headings and paragraphs, which are supposed to be centered, are overlapping my image and squeezing to the left of the screen. Is there a problem with my row and columns? Am I supposed to use text percentage instead of pixels? Something with an “.img-responsive” command? Something else that I don’t get?
I appreciate any help. Thanks!!


See the Pen Thomas Paine Tribute by Bobby (@bchingas) on CodePen.

you are using bs3 class(.img-responsive) with bs 4 linked to your pen, choose one

I added the “.img-responsive” out of desperation. It didn’t work of course.


not sure what you wanted to do there
try this: < img class="img-fluid" />

I’m trying to have the contents of my page maintain their relative position when viewed on a mobile device. Right now it looks fine on the editor; top image on the left column, headings on the second column, centered, and a blank third column, but everything collapses when viewed other ways.

yep thats what bs does, makes things look nicer) you should get familiar with bootstrap grid system , read abt breakpoints, you will have to add some classes
you might want to try to write this page without bs at all, just a fixed width)

Thank you very much! I’ll read more into bootstrap and also look into getting rid of it on my tribute page.