Trouble Lining Columns for Portfolio Project

#1

My columns won’t line up not sure what I’m doing wrong. Not sure if by adding an image to the first causes my second column to line up way down and not next to it. Any help would be appreciated.

`My HTML:`

        <div>
          <body class = "bgcolor">
        <div class = "header">
          <h1>Sathish's Portfolio</h1>    
          <div>
          <button type = "button" class = " buttons buttonshov">Projects</button>
          <button type = "button" class = "buttons buttonshov">About Me</button>
          <button type = "button" class = "buttons buttonshov">Contact</button> 
          </div>
          </div>
          <h2 class = "center">Projects</h2>
          <h3 class = "center">----------$----------</h3> 
        <div class = "container">
        <div class =  "row">
          <div class = "col-md-4">
            <h4 class = "projectone">Project 1 </h4>
            <div  class = "projpic">
            <img class = "center" src = "https://pbs.twimg.com/profile_images/638786550206230529/fwnBbDZF.png" alt = "google logo">
            </div>
          </div>
          <div class = "col-md-4 center">
            <h4 class = "projecttwo">Project 2</h4>
            <div>
            <img src = "https://pbs.twimg.com/profile_images/638786550206230529/fwnBbDZF.png" alt = "google logo">
            </div>
            </div>
          </div>
        </div>
          </body>
        </div>

My CSS:

.bgcolor{
  background-color:lightslategray;
  font-family:courier;  
  color:white;
}

.header{
  background-color: royalblue;  
  text-align:center;  
  padding-top:10px;
  padding-bottom:10px;
}

.buttons{
  text-align:center;  
  padding: 10px 24px;
  border-radius:8px; 
  background-color:white;
  color:black;
}

.buttonshov:hover{
  background-color:navy;
  color:white;
  box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

.projectone{
  color:white;
  padding-left:150px;
}
.projecttwo{
  color:white;
  
}

.projpic{
  padding-left:75px;
  width: 250px;
  height:200px;
}

.center{
  text-align:center;
  color:white;
}
#2

why do you have </div> after your </body> tag?
I know this kind of mistake can mess everything up!

2 Likes
#4

That last </div> tag closes the beginning <div> tag, is it supposed to be <body><div></div></body> rather than what I have?

#5

Not much further than you but boiler plate html document looks like this :slight_smile:
<!DOCTYPE html>
<html>
<head>
here your links + meta
</head>

<body>
Your code here
</body>
</html>

Do you have a pen? (I mean on Codepen :slight_smile:)

2 Likes
#6

Yes here’s the link to my pen: https://codepen.io/sgovinda/pen/VmEaKe if you can’t view it let me know. Thanks for your help!

#7

sorry I copied your code, look here.

You’ll see I removed the class="bgcolor" (it it’s necessary I think it’s better not to apply it to BODY).

I’ve offset your first column by 2 so that the content is centered. You only have 2 images, right?

2 Likes
#8

Yes only two images. This is great thanks! Pretty much what I wanted. Can you explain what “offset-2” class does and how it and removing “bgcolor” fixed things? Only because bgcolor defined the background color and font color so I didn’t think it would affect alignment.

I also didn’t know you could add body to CSS and it would do it for you so thanks for that too!

#9

I don’t think removing the class from the body changed anything but I just found it strange. You can however add that class to other elements !

To understand the grid, remember that no matter what, you have 12 units in a row.

You can use those units the way you want, so by columns of 4 units (then you’ll have 3 columns), or by columns of 6 units (so 2 columns) or for example one column of 3, one col of 2, etc…

In this case you have only two col of 4 units.

12 - (2 x 4) = 4 units.

So you have 4 units to distribute around your columns to make them centered etc.

So you tell your first column (the left side) to “start” 2 units later.

Hence col-md-4 col-md-offset-2

1 Like
#10

then look at this here. Might be a bit much but anyway.

Also see the wiki on CSS here on the forums.

any html tag can be a CSS selector. It’s just less specific than a class selector, but it’s not the a bad thing. Juggling with dozens of classes and ids is not ideal (for maintenance among other things).

So you could target your text with h1{color:white} for example.

1 Like
#11

Thanks for your help! I also noticed I didn’t have https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css for my CSS tab. Whoops

#12

typical ! you’ll also forget your jQuery when you need it :wink: everybody does !

1 Like
#13

I cleaned up your code.
You need to use triple backticks to post code to the forum.
See this post for details.

#14