Personal portfolio - viewport height, grid & media query

1

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: https://codepen.io/lazystreak/pen/ZEQOYVp

issues:

  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!

2

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
3

Hello,
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
4

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?

    image
    image1479×266 65.3 KB

  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. @slay.py 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
    image
    image1859×685 165 KB
5

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:

<body>
<div class="page-wrap">
<nav>link</nav>
<div>welcome </div>
<div>project</div>
<div>contact</div>
</div> <!-- end of page wrap -->
</body>

and at your css:

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

i checked all normal at my end.

6

Hello,
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.
Cheers!