Not accepting viewport size in portfolio project

Can anyone help, for some reason it’s not accepting my viewport size.

.welcome-section {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  width: 100%;
  height: 100vh;
  background-color: #a2d5c6;
  border-bottom: solid;
  
}

HI @jacktar86191 !

Welcome to the forum!

It would be better if you shared your codepen link so we can read the full error message.


I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Sorry about that, please see the below link for my code. I’m trying to match the viewport size with the height. Step 2 for the portfolio section layout test

https://codepen.io/JackTar8619/pen/WNRBYMm

Ok, I finally figured it out.

Two issues:

No.1
You wrote width and height twice in your codepen.

No.2
You will need to delete the border bottom.

Then it should pass.

Jwilkins. You’re a legend, thank you. It worked. I hadn’t realised that border-bottom was causing the issue.

1 Like

Adding box-sizing: border-box to your universal selector should allow you to have the bottom border as well.

* { 
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

Just note that it may change your layout a bit as element sizes are calculated differently. But it is usually how you want it anyway as it’s easier to reason about.

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