Member Avatar for niche1

I need to get my pages to automatically adjust when I adjust the size of the window in my browser.

Please direct me to some tutorials that can help me or give me some hints for my how to effectively search this issue.

Thanks.

  • 3 Contributors
  • 2 Replies
  • 99 Views
  • 13 Hours Discussion Span
  • Latest Post Latest Post by CommDave

Dani AI

Generated

As asked how to make pages resize with the browser, and were on the right track about using a flexible container. For a reliable, modern result, avoid table-based layout and inline styles for page structure. Use the viewport meta tag, relative units, CSS Grid or Flexbox for layout, responsive images, and small, tested breakpoints via media queries.

A minimal starting setup to make a page scale cleanly:

<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>

/* core rules */
* { box-sizing: border-box; }

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* fluid multi-column that collapses automatically */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 1rem;
}

/* images and media scale to their container */
img, video { max-width: 100%; height: auto; display: block; }

Use the classes above like this:

<div class="container">
  <main class="grid">
    <article>...</article>
    <aside>...</aside>
  </main>
</div>

Quick troubleshooting tips: test in browser DevTools at several widths and real devices; add temporary outlines or background colors to visualize boxes; prefer rem for font sizing and min-width/max-width to keep lines readable; avoid fixed pixel heights for major layout blocks. For images use srcset or <picture> so browsers pick appropriate sizes.

Good references: MDN - Responsive Design, MDN - CSS Grid, MDN - Flexbox basics, MDN - Responsive images.

Recommended Answers

All 2 Replies

Member Avatar for samarudge

use the % attribute
E.G.

<body>
<div style="margin:auto; width:80%; background-color:#FF0000;">Hello</div>
</body>
Member Avatar for CommDave

I've made my website scalable by using percent instead of pixels.

Try this. Create a table. Make it 80% width and CENTER it on the page. So you can see it, fill the table with any color. view it in a browser and test it!

CommDave


I need to get my pages to automatically adjust when I adjust the size of the window in my browser.

Please direct me to some tutorials that can help me or give me some hints for my how to effectively search this issue.

Thanks.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.