Controlling spacing on codepen


#1

The biggest difficulty I’m having now is controlling spacing on Codepen. Does anyone have any tricks up their sleeves? My url: https://codepen.io/ksirgey/pen/OgqjPJ/

I have added a background image to my personal profile. In ‘editor view’ mode, the image appears in full. When I change it to ‘full screen’ mode, it widens out with the top and bottom being lopped off.

The text overlay moves to a different spot over the background image.

And, spacing between sections (experience, education, etc.) becomes uneven.


#2

I’m not sure I’m seeing the same issue you describe, but try changing your background image to use background-size: cover, that will help ensure the background covers your main header - and perhaps show you how a height of 100vh is affecting the spacing of the sections below it.


#3

Thanks. This helps. In my About Me section, I have to set padding to different levels (padding-top: 60px and padding-bottom: 45px for the spacing to appear even). Why might this be? Could it be because I’m using Bootstrap’s flexbox grid system to house the title and description of this section? Thanks again.


#4

You have both bootstrap libraries loading, but you only need one. I think if you delete bootstrap 4 from your settings, you’ll start to see better results for things like columns.

And yes, you need two different padding sizes because there’s also bottom padding on the .row. That’s no specifically because of the grid system, but it is in bootstrap.