Member Avatar for Alv45525

Hi there, i need to make my webpage working on different resolution from 640x480 up to 1024x768 and also to open on different browser....can anyone help me in this??:'(

  • 3 Contributors
  • 4 Replies
  • 112 Views
  • 2 Days Discussion Span
  • Latest Post Latest Post by Alv45525

Dani AI

Generated

Good start, — and pointed to the right problems. To support screens from roughly 640x480 up to 1024x768 and keep cross‑browser behavior predictable, use a fluid, centered wrapper, let content flow (avoid fixed heights), make media scale, and add a small breakpoint to collapse multi‑column layouts at narrow widths.

A compact starter you can drop into your stylesheet:

/* fluid centered wrapper */
.container {
  width: 96%;
  max-width: 1024px;
  margin: 0 auto;
  padding: 0 12px;
  box-sizing: border-box;
}

/* make images and embeds scale */
img, video, iframe {
  max-width: 100%;
  height: auto;
  display: block;
}

For layout, prefer CSS flexbox or grid instead of tables (tables are for tabular data). Example pattern for columns that wrap and collapse:

.row { display: flex; flex-wrap: wrap; gap: 16px; }
.col { flex: 1 1 300px; min-width: 200px; }

/* collapse to single column on small screens */
@media (max-width: 640px) {
  .row { flex-direction: column; gap: 12px; }
}

Troubleshooting checklist:

  • Declare a standards doctype to avoid quirks mode.
  • Avoid fixed heights on wrappers; let content determine height.
  • Inspect with browser dev tools to find an element wider than its container (common culprits: images, iframes, form controls).
  • Use box-sizing: border-box so padding doesn’t blow out widths.
  • Validate markup and test across browsers and resolutions (see the W3C validator) and read MDN’s responsive design guidance for patterns and gotchas.

If support for very old browsers is required, use graceful degradation and feature detection rather than layout hacks.

Recommended Answers

All 4 Replies

Member Avatar for macneato

Usually all sites open when using a different browser, its just the way that it is displayed that is an issue. Using good, clean code (sometimes a bit of hacking) does the trick.

As for resolution, 480 is being a lil wierd, I'd say 600 is a good place to start. So if you want to do it, set your table width and height (if tables are what you do) and nest the rest. Or simple set the div container width & height.

If you still don't get it, Shout and this time, drop (upload) some code.

Member Avatar for Alv45525 
<style>
table{max-width: 1024px;
         max-height: 768px;
        }
</style>

is the code for setting the width and height???

Member Avatar for Dani

Yes, min-width works too if you'd like to set a minimum. But basically that code will have a table take up the full width of its container up to that width. You're probably best using divs though.

Member Avatar for Alv45525

thx to you all for your help

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.