Div Not Letting 100% Of Width When Resizing Browser

June 25, 2024 Post a Comment

I remember it used to work when I set the width to 100% once resized at certain pixels from desktop to tablets to mobile. Just don't know why mine won't work this time around for s

Solution 1:

I see what is happening here!

Your header has 200px of padding and the content has 80px. When the width of the window is above 600px, the width of the content and header is auto, so it's the width of their container (<body>) minus the 200px/80px padding, and because the padding is on the outside of the width, they fill up the width of the window nicely!

Then when the window size goes below 600px, the width of the header and content is set to 100% of the container, but the 200px/80px of padding is on the outside of this 100% so the element takes up much more space! If you set the box-sizing to border-box, then the padding gets put on the inside and you don't see any change when the window width changes.

I think what you want to do is reduce the padding instead of making the width 100%, to make the content wider! Also you might want to do something about the 8px of margin on <body>, because that's why there is a gap around the whole page.

I hope I got it right :)

Solution 2:

To make the space around the content decrease when the screen goes below 600px

*. {
	width: 100%;
}

body {
	font-family: Andale Mono, monospace;
    margin: 0;
}

p {
	font-size: 24px;
}

.header {
	padding: 80px;
	text-align: center;
	background: #001f4d;
}

.headerh1 {
	font-size: 64px;
	color: white;
}

.headerp {
	color: white;
}

/* Begin main-content */.content {
	background: #0d0d0d;
	padding: 80px;
	color: white;
}

#main-title {
	text-align: center;
	font-size: 36px;
}

#main-paragraph {
	max-width: 1000px;
	margin: auto;
}

.column {
  float: left;
  width: 33.33%;
}

/* Clear floats after the columns */.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Footer */.footer {
	background: #001f4d;
	padding: 80px;
	color: white;
}


/* Small devices (portrait tablets and large phones, 600px and up) */@media screen and (max-width: 600px) {
	.header {
		padding: 40px;
	}

	.content {
		padding: 40px;
	}
  
  .footer {
    padding: 40px;
  }
}

<!DOCTYPE html><html><head><title>Doug Cannon's Biography</title><metacharset="utf-8"><metaname="viewport"content="width=device-width, initial-scale=1.0"><linkrel="stylesheet"type="text/css"href="style.css"></head><body><divclass="header"><h1>My Website</h1><p>Welcome to my website.</p></div><divclass="content"><h2id="main-title">About Me</h2><pid="main-paragraph">Mollit officia quis officia nostrud culpa ad sunt quis nulla quis esse adipisicing ut. Ullamco mollit ad elit reprehenderit mollit in duis incididunt id sit laboris adipisicing nisi pariatur. Lorem ipsum ea ut qui in ea consectetur id adipisicing quis officia occaecat laboris id velit. Sunt ea irure ex nostrud elit enim dolor in ut anim cillum ad duis.</p><br><br><br><!-- Responsive column cards --><divclass="row"><divclass="column"style="background-color:#aaa;"><h2>Column 1</h2><p>Some text..</p></div><divclass="column"style="background-color:#bbb;"><h2>Column 2</h2><p>Some text..</p></div><divclass="column"style="background-color:#ccc;"><h2>Column 3</h2><p>Some text..</p></div></div></div><!-- End main-content --><divclass="footer"><footer>
	      Douglas Cannon <spanclass="highlight">&copy; 2019</span></footer></div></body></html>

Html5 Tutorial

Div Not Letting 100% Of Width When Resizing Browser

Solution 1:

Solution 2:

To make the space around the content decrease when the screen goes below 600px

Post a Comment for "Div Not Letting 100% Of Width When Resizing Browser"