Personal portfolio - viewport height, grid & media query

hi! i’m bumping into a couple of issues while working on the portfolio project, and would appreciate some guidance.
here’s the link to my codepen:


  1. not passing the test for viewport height. i’ve set height: 100vh; under the #welcome-section in my css code but it’s still not passing the test. also, i’ve noticed that when i resize the page with the current height set, it will overflow into the next section (projects) even though it’s set to display as a block element.

2. media query isn’t working as expected.
even though it’s passing the test, the expected behaviour is for it to stack. right now, it still remains as a row.

3. issues with grid in css
currently for grid-template-columns, images under projects can be displayed as a row when i set grid-template-columns: 3fr 3fr 3fr 3fr. however, if i change that to: grid-template-columns: repeat (4, 3fr); it stacks up vertically into a single column instead.

thanks in advance!

hi @lazystreak
welcome back,

i noticed that you add padding on your #welcome-section that whats causing the failed test.

you may try add whole page wraper and set to position: relative; and top: 100px;

1 Like

1: You setted the padding-top:50px of the welcome-section that s been added to the sum of the height:100vh; If you remove the padding-top property you will see that it will pass the exam, but it’s not how it fit correctly. You can just adjust the height of the #welcome section to fit the padding added (i.e. height:91vh)
2: in the media query you need to overwrite your selectors property.
If you set .project-display { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 5px; } in the normal css, you need to overwrite the grid-template-columns in the @media query. I.e. @media (max-width: 1000px) { .project-display { display: grid; grid-template-columns:1fr; grid-gap: 5px; }

  1. I tried to change the code in your codepen and .project-display { display: grid; grid-template-columns: repeat(4,3fr); grid-gap: 5px; } worked as expected. Tell us more about your doubt!
1 Like

thanks for your replies! appreciate it.

  1. i managed to get the test to pass with the suggestion from @sobadrdb of wrapping all items in a div block, and moving the position from the top using that wrapper instead of in the #welcome-section.
    however, when i adjust the page’s height there will be an overlap with the elements below. is this expected behaviour?

  2. have updated the media query but it’s not doing anything as well. here’s the code in my css:
    .project-display { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 5px; }

and here are my selectors in the media query:
@media (max-width: 1000px) { .project-display { display: grid; grid-template-column: 1fr; }

  1. strange i’ve used the same code but the output looks different than if i were to use 1fr 1fr 1fr 1fr . screenshot for your reference

hi @lazystreak,
im not sure to what changes youv’ve made.
last time i tried, there was no overlaping issue with other element.

i was tried like this based on your html structure:

<div class="page-wrap">
<div>welcome </div>
</div> <!-- end of page wrap -->

and at your css:

.page-wrap { position:relative; top:50px;}

i checked all normal at my end.

2. You are missing an ‘s’ at the end of your grid-template-column , in the @media (max-width: 1000px) { .project-display { display: grid; grid-template-column: 1fr;
3. That’s because you added a space between repeat and (4,1fr), just delete that space : repeat(4,1fr); and you will see it will works.