Preventing div from utilizing full width when browser is resized

Question

Preventing div from utilizing full width when browser is resized

Back in the day, I had no problem getting my header, content, and footer to resize proportionally across different devices just by setting the width to 100%. But for some reason, it's not working this time. I can't figure out why. I still need to work on the footer, though.

*. {
width: 100%;
}

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

p {
font-size: 24px;
}

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

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

.header p {
color: white;
}

/* Begin main-content */

.content {
background: #0d0d0d;
padding: 80px;
color: white;
}

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

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

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

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



/* Small devices (portrait tablets and large phones, 600px and up) */

@media screen and (max-width: 600px) {
.header {
width: 100%;
}

.content {
width: 100%;
}

#main-paragraph {
width: 100%;
}

.column {
    width: 100%;
  }
}

<!DOCTYPE html>
<html>
<head>
<title>Doug Cannon's Biography</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="header">
<h1>My Website</h1>
<p>Welcome to my website.</p>
</div>

<div class="content">


<h2 id="main-title">About Me</h2>
<p id="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 -->

<div class="row">

  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>

  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>

  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>

</div>



</div> <!-- End main-content -->

<div class="footer">
<footer>
      Douglas Cannon <span class="highlight">&copy; 2019</span>
    </footer>
</div>

</body>
</html>

html css responsive-design media-queries

Answer 1

Answer №1

It appears I have caught on to the situation!

The header is set with 200px of padding while the content has 80px. Once the window width exceeds 600px, the content and header widths become auto, adjusting to their container's width (<body>) less the 200px/80px padding. Since the padding extends beyond the actual width, they seamlessly fill up the window width!

However, should the window size drop below 600px, the header and content widths are adjusted to 100% of the container, but maintain the 200px/80px padding on the outer edges. Consequently, the elements occupy considerably more space! By setting box-sizing to border-box, the padding shifts inside, allowing for consistent appearance irrespective of window width changes.

To achieve a wider display, consider reducing the padding rather than setting the width to 100%. Additionally, address the 8px margin on <body> which creates gaps around the entire page.

Fingers crossed that my interpretation is accurate :)

Answer 2

It appears I have caught on to the situation!

The header is set with 200px of padding while the content has 80px. Once the window width exceeds 600px, the content and header widths become auto, adjusting to their container's width (<body>) less the 200px/80px padding. Since the padding extends beyond the actual width, they seamlessly fill up the window width!

However, should the window size drop below 600px, the header and content widths are adjusted to 100% of the container, but maintain the 200px/80px padding on the outer edges. Consequently, the elements occupy considerably more space! By setting box-sizing to border-box, the padding shifts inside, allowing for consistent appearance irrespective of window width changes.

To achieve a wider display, consider reducing the padding rather than setting the width to 100%. Additionally, address the 8px margin on <body> which creates gaps around the entire page.

Fingers crossed that my interpretation is accurate :)

Answer 3

Answer №2

To decrease the space around the content when the screen size is less than 600px

*. {
width: 100%;
}

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

p {
font-size: 24px;
}

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

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

.header p {
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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="header">
<h1>My Website</h1>
<p>Welcome to my website.</p>
</div>

<div class="content">

<h2 id="main-title">About Me</h2>
<p id="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 -->

<div class="row">

  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>

  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>

  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>

</div>



</div> <!-- End main-content -->

<div class="footer">
<footer>
      Douglas Cannon <span class="highlight">&copy; 2019</span>
    </footer>
</div>

</body>
</html>

Answer 4

To decrease the space around the content when the screen size is less than 600px

*. {
width: 100%;
}

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

p {
font-size: 24px;
}

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

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

.header p {
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>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>

<div class="header">
<h1>My Website</h1>
<p>Welcome to my website.</p>
</div>

<div class="content">

<h2 id="main-title">About Me</h2>
<p id="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 -->

<div class="row">

  <div class="column" style="background-color:#aaa;">
    <h2>Column 1</h2>
    <p>Some text..</p>
  </div>

  <div class="column" style="background-color:#bbb;">
    <h2>Column 2</h2>
    <p>Some text..</p>
  </div>

  <div class="column" style="background-color:#ccc;">
    <h2>Column 3</h2>
    <p>Some text..</p>
  </div>

</div>



</div> <!-- End main-content -->

<div class="footer">
<footer>
      Douglas Cannon <span class="highlight">&copy; 2019</span>
    </footer>
</div>

</body>
</html>

Answer 5

Answer №3

Upon visiting this site, I encountered two issues that were preventing the browser from properly rendering the page with the HTML not sizing to 100% of the browser viewport.

The first issue stemmed from my use of img tags with inline styling in the HTML code like so;

<img id="recipe_picture" class="method-img" src="{{ step.picture1() }}"/>

Secondly, after attempting to fix the problem by setting the main container's padding to 0 (which actually made things worse), the resizing issue persisted.

        .container{
            padding: 0;
        }

By removing these components, I was able to resolve the issue. Hopefully, this solution will be helpful to others experiencing similar problems.

Answer 6

Upon visiting this site, I encountered two issues that were preventing the browser from properly rendering the page with the HTML not sizing to 100% of the browser viewport.

The first issue stemmed from my use of img tags with inline styling in the HTML code like so;

<img id="recipe_picture" class="method-img" src="{{ step.picture1() }}"/>

Secondly, after attempting to fix the problem by setting the main container's padding to 0 (which actually made things worse), the resizing issue persisted.

        .container{
            padding: 0;
        }

By removing these components, I was able to resolve the issue. Hopefully, this solution will be helpful to others experiencing similar problems.

Preventing div from utilizing full width when browser is resized

Answer №1

Answer №2

To decrease the space around the content when the screen size is less than 600px

Answer №3

Similar questions

The window fails to retain the scroll position when overflow is enabled

Using javascript to transform the entire list item into a clickable link

Delete all HTML functionalities

Creating a Bootstrap carousel with a caption placed on the right side - here's how!

is it possible to position datepicker's dropdown panel at the top in Vue.js?

What is the best way to display the complete text or wrap a menu item in an Angular Material menu?

What is the best way to define relative paths for content like CSS files?

Modifying the appearance of the initial column in a panelGrid

Encountering an issue where an error message indicates that a variable previously declared is now undefined

What could be causing my video not to display a thumbnail on mobile devices until it is played?

displaying dropdown menu from bootstrap 4 on top of a div located below

What could be causing the unexpected behavior of nth-child?

Concealing Columns in the Beta version of Bootstrap 4

Requesting data from local APIs using ZingGrid CRUD operations

Personalizing/Concealing Navigation Controls

Compiling SCSS to CSS in Vue.js is a breeze

Activate the Navbar by clicking on the bar and change the color of the icon

When I try to scroll, the sticky card fails to stay in place as intended with CSS

Issue with Smooth Div Scroll on Chrome

Ways to ensure that a div, header, container, and other elements completely cover the viewport