My contact section height doesn't work

Problem:
I try height:100vh but the result doesn’t change the height is like broke and my page some how got width scrolling help!
Thanks alot!
My pen: https://codepen.io/CaptainHenry/pen/NWjPQKE

You don’t need a hash in html for your id.
<section id='#Contact'>

1 Like

But my page is still some how got it width too big and I don’t know what have caused it. Looking forward to your reply, thanks!

The overflow has a few reasons, one comes from your welcome section:

#welcome-section h1, #welcome-section h5{
  width: 100%;
}

You give both headings a width of 100%, and then position your <h5> somewhere in the center:

h5 {
  left: calc(50vw - 4rem);
}

That’ll cause it to take up approximately 150% of the total available width.


The second issue is here:

#navbar {
  width: 100vw;
}

100vw is almost always a bad idea, go for 100% instead.


The third issue is this:

img{
  padding: 10px 30px 10px 10px;
}

Those paddings increase the size/push against the boundaries of the container, but this is easy to fix if you add box-sizing:border-box;

1 Like

Woah thanks! But why did calc(50vw - 4rem) made it up to 150% I thought it would just take 50% of current view and go back a little?
I’m really apreaciate

The position left property and the width property are completely unrelated things. You tell the browser “hey I want this to start approximately in the center of the page” and then you tell it “and also give it 100% of the width of its parent container”. The browser won’t automatically adjust the width to make it still fit into the page, it’ll obey your command and make it 100%.

1 Like

Thanks a lot! but how can I get my words to the right responsively ?

If you want to keep position:absolute for the headings, you could give both of them a width of 100%, and both of them text-align:center. Then, to move the <h5> over to the right a little, remove the position:left() and give it a padding-left:80px instead.

1 Like

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