What am I missing? I'm sure these things should be simple

Hi all, I am working on my first project, the tribute page and am suck with a couple of things.

I cannot get the page to display properly on mobile or desktop at the moment. I suspect it is to do with the Bootstrap columns. If I make them xs then everything piles up on the left but if I make them md then it looks fine on desktop etc but terrible on phone.

Also, the bullets in the list seem to be going to the left whilst text is centred. I’m sure I’ve messed something up for it to do that but can’t see what.

The link to Codepen is http://codepen.io/JMasters17/pen/OpzxaP

I’d be grateful of any advice here.



I notice you have placed <body> inside a div and you also didn’t close all divs properly.
Here’s your code indented properly and with closing tags (logo is HUGE now): http://codepen.io/anon/pen/LWQLGX

Bullets being centered is because you have text-center in parent div. I’ve removed it and text is aligned to the left. If you want to offset bullets, then use margins.

And finally, regarding mobile vs desktop.
As pointers I can tell you that you can add multiple classes to your elements so you have more control over how they are displayed on different devices. I suggest you toy around with examples from http://getbootstrap.com/css/#grid-example-mixed and http://getbootstrap.com/css/#responsive-utilities
The latter allows you to hide elements depending on screen res to hide a logo on mobile for instance.

Have fun!

1 Like

Thank you so much for your help! I need to work on keeping my code tidier :slight_smile:

Those links are fantastic too - definitely worth bookmarking

Off you go!

You should take time to go through Bootstrap doc at least once to know what’s possible and where to find info. It’s well written and structured.
Enjoy the read. RTFM is fun. :slight_smile: