First, let’s take care of that ugly scrollbar at the bottom. Look at your intro section:
<section id="intro">
<div class="row">
<div class="col-lg-12">
<div id="content">...</div>
</div>
</div>
</section>
You do not have your row nested inside a container. Rows must be inside containers, or else your paddings and margins will be off. Put your row inside a container-fluid, and your scrollbar on the bottom will magically disappear.
Ok, let’s head to your next section and get that working. You have the container being 56vh high. This is fine for desktop when the items are side by side, but when the page shrinks down, your image needs to go on top of your text, and all of a sudden that height becomes a restriction, and your text overflows into the container below. To fix this, specify that the minimum height is 56vh. This will allow the container to get bigger if needed:
#aboutSec {
min-height: 56vh;
}
Ok, now the next problem is that the image is way to big when it gets in the awkward in between stage:
This is due to the col classes you used. Instead of using col-lg-9
I would use col-sm-9
for this about section to keep the text next to image until absolutely necessary for them to break apart. If you add the class .center-block
to your image, it will also center it when the page breaks down:
Alright, that takes care of the first couple sections, onto the portfolio area. You are closing your class tags too soon in the second paragraph row. Fix those quotation marks. I personally don’t like breaking a three column row into what I call a 2 column row like you are doing:
I would rearrange your column number, or break it down into full width with sm-12 so it looks more consistent and there isn’t one lonely portfolio item hanging over:
Notice the image is small. Fill out the other columns with dummy content exactly like you would have it, I mean links and pictures so you can style it how you want instead of an image only taking up part of the column.
Also, you got the same height problem in this section. Switch the container to min-height. Now, the margin spacing in the portfolio section is very cramped on mobile:
Insert the most common meta viewport tag in codepen settings. Then you will need to add what is called a CSS media query to give some margin once the screen shrinks down.
All that is left is to fix the images in the portfolio section. I can’t help you with that, because I don’t know how you want to do that. I’ll leave that for you to figure out.
With just those changes, the result looks pretty good on mobile now (click image to view in a new tab, and click again to zoom in and see it):
https:/uploads/default/original/3X/9/b/9bcbab028d61ef2b2d4a0173624a2a36b109a7a5.jpg
Finally, don’t consider your portfolio done. It is pretty lacking, there is a lot you can do to improve it and make it more creative and personal to you, but you are off to a great start! Hope this helps.