Seeking mobile responsive design help

Hey guys,

I’m stuck on trying to figure out how to make my tribute page responsive when I use CSS to help format my list items, text, and paragraphs.

Basically for my tribute page I’m just recreating the sample page that was given to us but I can’t seem to get the mobile responsiveness to align correctly when I use CSS. I think it is conflicting with bootstrap.

The CSS I use looks good when I have it full screen on my monitor, but when I change my browser’s size it slowly just falls apart and becomes unreadable. When I look at the sample website, the creator was able to fit everything perfectly even when the site was resized.

If I take that CSS out, my website looks fine, but I’m trying to recreate it to be similar to the original sample.

My code:

Original code:

when doing mobile responsive web design try to start your page from the perspective of being used on a mobile and work up to a page that fits on a desk top …
use the dev tools and click the mobile icon to see how your page looks in different mobiles,tablets and laptops

i use media queries rather than bootstrap as i wanted to do the work myself so after googling media queries i found the short free responsive web design course on udacity and found it very helpful. do these quick courses and you will be off to a very good start on understanding and creating responsive web design . I did the second course on the link and found from just doing that i was now able to make my website (which im working on got distracted before i finished and am working on wiki viewer and weather app lol) fully responsive to whatever it is being viewed on.

1 Like

I really like the Udacity course as well. Seconded.