Bootstrap Div Column Frustration


#1

Hi everyone,

I’ve been having a problem with my portfolio project for the past couple days and I still cannot figure out what’s going wrong after playing around with the code and reading through various help forums and documentation. I used a similar structure in my tribute page and it works just fine. Columns are all at different vertical positions and not placed right to left.

It’s
1
---- 2
3

but it should be
1 2 3

I also notice that my h1’s font size doesn’t respond to it’s css.
If someone is able to point me in the right direction, I’d really appreciate it.

Here’s the link:

THANK YOU


#2

I’m not familiar with the Bootstrap styles, but it looks like the font-size for your H1 is a simple typo; you have “72x” instead of “72px” and there are extra slashes (/) before and after your comment markers around “COLOR SCHEME”.

The width of the #bioPic element is being applied to the image itself rather than the containing div, which might explain why it is center-aligned.


#3

I just looked at your codepen and there are a couple of issues.

Your CSS isn’t working as expected because of the code comments at the top:

Change this:

//*
    COLOR SCHEME: deep purple, silver
      OR cream, brown, gold. warm etc
*//

to only have one / instead of two //:

/*
    COLOR SCHEME: deep purple, silver
      OR cream, brown, gold. warm etc
*/

Then your h1 css settings will work, but change 72x to 72px as mentioned by @bhammond above.

Your grids and columns aren’t working as expected because you haven’t added Bootstrap to your project. In Codepen, click Settings -> CSS -> Quick-Add and then choose Bootstrap 3 from the dropdown menu. This will help you get your columns/grids working as 1 2 3 like you were hoping.


#4

omg REALLY?. Lol I knew it would be something simple and stupid. Thank you!!