Unable to create spacing in Personal Portfolio

The mobile version of the webpage is fine. The problem is in the bigger screen size. I need my projects to have a space between them equal to the space vertically between them that is currently there. I’ve tried everything I know including margin, space-around(flex), space-between(flex), and space-evenly(flex) but nothing works. Please help. Thank you. Here’s the link to the codepen https://codepen.io/creativecodepenuser/pen/MWeVyOx?editors=1100

Hi Problem-solver,

I have checked your code and see that your contact section has been set to height: 100vh - that explains why there is no space left for other elements to position themselves vertically.

Try removing height and padding-top property, and go ahead with flex again.

1 Like

Thank you for your response. I commented out the lines that you said I should remove but it doesn’t help. The projects are already vertically how I want them. I need to horizontally give the same amount of space between that they have vertically already.

I think the easiest way is to switch to grid in larger viewports:

  display: grid;
  grid-template-columns:1fr 1fr;
1 Like

Thank you @jsdisco, your solution works perfectly!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.