Webpage content shrinking when viewport is width is changed

HTML-CSS
#1

Hi,

I’m trying to get my main content to fit the view port, and to wrap when the page width is narrowed.

However what is happening is that the page width ends up being greater than the viewport (I don’t want horizontal scroll), and when I resize my content ends up shrinking instead of wrapping.

I tried to recreate in codepen, but when I copy and paste my code it is working as expected, so I think I’m missing something in my html <head> section, however I have no idea what.

https://github.com/jdndm/fcc-technical-documentation/tree/fix/14-navbar-visable

https://codepen.io/jdndm/pen/LYZQXmm

#2

@jdndm
Please send the link to Codepen

#3

@codely I’ve updated my post to include the codepen link. It works as expected in codepen so not sure what I’m missing.

#4

Is this a Technical Documentation
For Project Html-Css

#5

Yes it’s the technical documentation challenge for the html-css course.

#6

In line 12 take away the line and see but the layout has gone
Is it okay
I am still see the code.

Thanks,

#8

In #main-doc

delete all other code in it and add

margin: 0px 250px;

Hope it works

Thanks.

1 Like
#9

Do you want the finally code ??

#10

Thank you, that has pointed me in the right direction. Using your example gave me a large margin on the right also which looked weird.

I ended up using ;

#main-doc {

  margin: 0px 5px 0px 250px;

}

To give the desired effect.

Cheers!

1 Like
#11

This

<header><h2>Step 1</h2></header>

into

<div><h2>Step 1</h2></div>

To all the heading you have given header change it into div.

Thanks

#12

Why should I do that?

I thought the <header> tag is important for accessibility? If anything, I think I should be wrapping each section in main-doc in <article> tags?

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/header#Examples

#13

If it is easy for you, you may continue using <header>

#14