Portfolio project.. 2 problems

1

Hello FCC

I’m on my portfolio project and I’m very near to the completion. But I still have 2 problems I am struggling to find solutions to. I hope someone could enlighten me. (By the way, I did post the similar topic a few days ago but I coded my page from the scratch again because there were lots of unclosed tags with the previous one causing strange behaviour.)

Here is the link to my codepen.

Problem 1.
Putting images vertically middle.
In the portfolio section, I have 6 images and they are all within their own grid. I want them to be aligned vertically middle. I have tried vertical-align using CSS but it didn’t really move. Is there any specific elements or attributes I can use to put them where I want?

<div class="row" style="background-color: white">

   <div class="col-md-4">
      <img src="image address" class="img-responsive portfolio-image" alt="Website_1">
   </div>

   <div class="col-md-4">
      <img src="image address" class="img-responsive portfolio-image" alt="Website_2">
   </div>

   <div class="col-md-4">
      <img src="image address class="img-responsive portfolio-image" alt="Website_2">
   </div>

</div>

.portfolio-image {
    padding-top: 10px;    
}

Problem 2.
At the bottom of the page, I have a form where visitors can write me an email. And my message textbox is supposed to be of 250px height. It is showing as 250px high in my local browser, but when it’s uploaded to the codepen, it becomes oneliner. Can’t really figure out why…

<form>
   <input type="text" class="form-control" placeholder="Name" required><br>
   <input type="text" class="form-control" placeholder="E-Mail Address" required><br>
   <input type="text" class="form-control textarea" placeholder="Message" required><br>
   <button type="button" class="btn btn-default">Submit</button>
</form>

.textarea {
    height: 250px;
}

Oh! and the same codes all look different when 1) I open the file from my browser 2) when I upload it to the free hosting website. (CSS to the most outer portfolio div is not applied at all.) and 3) when I view from the codepen. Any possible reasons please?

I’m thoroughly enjoying the course and can’t thank enough for all the help I’m getting from the community. Hope to become good at it soon! :smile:

2

I think you want to center the portfolio images when the screen width forces the images to be stacked vertically. You can change your portfolio-image class to the following to center each image.

.portfolio-image {
    padding-top: 10px;    
    margin: 0 auto;
}

I would first recommend using an actual textarea element like:

<textarea name="comment" placeholder="Message" required></textarea>

and not using the form-control class on it. Then in your css, you could define a textarea selector like:

textarea {
    height: 250px;
    width: 100%;
}
3

Thank you Randell!

I changed the input type=“text” to textarea tag and first thing I noticed was that I was able to do the line break when typing the actual message in. Haha!

And when I removed that form-control class, the width of the input field was so much different from the other inputs above. So then I knew straight away that I had to override the bootstrap for the height only. So I just did style=“height: 250px” inside the textarea tag and problem solved!

But I still have problem with the grid and photos. If you look at the photo I’m uploading, all 3 images within the picture have all different ending line. (i.e. all 3 photos have different height.) I initially made 2 rows. First row for the photos and 2nd row for the description because I wanted the text to start on the same level. But when I did that, I had problem with vertically aligning these images in the middle. But the bigger problem was when i loaded up from the mobile. Because all 3 images were in the same row, I was seeing 3 images followed by each description. (So I think that

13%20pm
13%20pm1012×374 249 KB
the images vertically stacking was because I had put all those images in the same row.) So I’ve merged the rows but I still think I have to do something to make it look more nice. The only thing I can think of is to put paddings on the top to move the content around. Do you reckon there’s a smarter way to do this?