That was fun and educative!

That was fun and educative!
0.0 0

#1

I’ve spent roughly 15 hours on this portfolio on codepen

I’ve tried to experiment myself with CSS before jumping to Bootstrap and have learned couple of interesting things! I’ve also done my best to keep a responsive design at all times. I am out of ideas now beside adding caption / description on my projects. But if anyone can suggest something else or sees a bug I would appreciate the feedback!

Thanks in advance!


#2

Nice! :thumbsup:

How about using <textarea> for the message field?

Also in mobile try arranging the skill bars and their respective labels in a stack (instead of split in two columns).

The form also shrinks in mobile.


#3

Thanks a lot for your suggestions!

I’ve implemented the textarea and played some more with responsiveness so that it would take more width space on smaller devices.

About the skill bars, did you have this in mind?
On laptops they are still horizontally placed and use more real estate which seems like an improvement. However when stacked on mobiles it feels like they need some margin, but I am unable to do that for some reason.

I use icons in my skill bars and below my form at contact section. All these icons have “dev” class applied to them. After selecting them with CSS on line 71 and trying to give them a larger margin, only the lower icons adapt, but not those inside the skill bars.

If someone could point out as to why that happens, you would remove my headache!


#4

It might have something to do with the fact that the icons in the skill bars are wrapped in <div>s with col classes.

I was referring to the progress bars, but I think they’re fine the way they are.

Try adding this:

#upper-well > div {
  margin: 10px;
}

#5

Thanks, that’s what I was looking for!

I see what you mean now with progress bars and will definitely keep it in mind for my version 2.0 down the road. :slight_smile: