Portfolio progressing - need help with Bootstrap responsive columns

I have worked on various features for my portfolio page using Bootstrap, and I’ve learnt much:

  • Background image
  • navbar-fixed-top adjusted to work well enough
  • ScrollSpy working with navbar
  • Social icons which bring up the official social colour when you hover over them
  • Clearfix - used to good effect after the contact form

Anyone able to help with my Bootstrap responsive columns?
I have a problem with the wrapping of my protfolio placeholder columns - just click Portfolio in the navbar to go straight to it:

I’m not sure how to do it, and I would really value help! I wondered if using clearfix would help, but I tried without success so far.

I’ve also got the same problem with my coding experience just above the portfolio section, at a narrower screen width (when col-sm-xx is active):

The column headed ‘StackSkills and Udemy’ is a very short column, and the text is less than the column to it’s left; even so, I want the column headed Jonas Schmedtmann to move to the left and below. Then the column headed CakePHP would move to the right.

Two other issues
There are two other issues which I would like to improve and need help with.
1) Putting logo with the text above I have put the CakePHP logo in a separate block. If the CakePHP column moves properly to the right, as above, this isn’t so much of an issue. However I would like to put the logo below the CakePHP text so that it is part of that column, behaves responsively as an image, and moves when the column moves responsively. It may be a question of putting the logo into a separate display block with the text above it. I would appreciate suggestions for how to include it with the text it relates to.

2) Understanding margins and padding on a section For my contact section, I have a class .contact-section. I have put the following margin and padding in, which seems to help with the navbar links and separate colouring for the contact section and other sections:
.section-contact {
margin: -40px -15px 0 -15px;
padding: 80px 40px 0 40px;
}
I wanted to set the margin-bottom or the padding-bottom (0 above), but it didn’t make any difference. This was after using clearfix for the contact form fields. I ended up putting in an extra class .forum for the forum column and adding a margin-bottom to it which achieves my purpose, but isn’t very neat.
Is there a way I could add a margin to the .contact-section class?

I appreciate any help with working solutions for the above, particularly the responsive columns.

To solve the columns issue in your portfolio, get rid of the padding-right in your portfolio-block.

I think it’s making the div wider than can fit on the row.

I worked this out, after lots of trial and error, using the inspect tools in the Chrome developer tools. This lets you select a html element and toggle various css properties on and off - it’s a good tool to get used to using to debug hinky layout issues like this :slight_smile:

1 Like