Member Avatar for mreisman

I am trying to making my web pages so that as different users go on my site (it will conform to their own resoluiton). Is this possible? If so what is the easiest way to accomplish this.

  • 6 Contributors
  • 11 Replies
  • 276 Views
  • 2 Months Discussion Span
  • Latest Post Latest Post by HI2Japan

Dani AI

Generated

Brief summary of the thread and a modern, practical path forward. Replies from , , and correctly flagged the main issues: table layouts and fixed-size assets make a page stop adapting. The most reliable solution today is responsive design: move away from table-based structure, make the page’s container and media fluid, and add a few breakpoint rules so the layout reorganizes at different viewport widths.

Concrete, actionable steps (apply in sequence):

  • Switch the page structure to semantic HTML and a CSS layout (Flexbox or Grid) instead of tables.
  • Enable proper mobile scaling with a viewport meta tag.
  • Constrain content with a centered wrapper and a sensible max-width so very wide screens don’t create awkward long lines.
  • Make images and embeds scale by using fluid sizing.
  • Add media queries for layout changes at a few breakpoints rather than trying to force one size to fit all.

Example snippets (keep them simple and test incrementally):

<meta name="viewport" content="width=device-width, initial-scale=1.0">

/ wrapper /
.wrapper {
max-width: 1100px;
margin: 0 auto;
padding: 0 1rem;
box-sizing: border-box;
}

/ responsive images /
img { max-width: 100%; height: auto; display: block; }

/ simple breakpoint /
@media (min-width: 900px) {
.layout { display: flex; gap: 1rem; }
.layout > * { flex: 1; }
}

Diagnostic checklist for stubborn overflow or fixed layout: look for any fixed-width images or inline styles, absolutely positioned elements, preformatted text, iframes or third‑party widgets, and background images with pixel dimensions. Browser developer tools (responsive/device emulation and computed-style inspection) will reveal the offending element. Also confirm a modern DOCTYPE to avoid quirks-mode layout differences.

A pragmatic rollout: convert one template at a time (mobile-first), make images fluid and add a max-width wrapper, then introduce breakpoints and replace table regions with flex/grid. That approach addresses ’s image concern, builds on ’s CSS direction, and avoids the cross-browser traps warned about.

Recommended Answers

All 11 Replies

Member Avatar for Dani

As a personal taste, I always use CSS to do all of my site design if I can help it. It just makes things flexible in the end. You can put all body content inside a <div> and set width to a relative or absolute size. For example, setting <div style="width:720px"> sets a fixed width that would look fine at 800x600, and leave extra space at higher resolutions (as is here on DaniWeb).

You could also set width:80% which would set a variable width based on the user's current browser window. It would occupy 80% of their browser window, for example. If the surfer were to resize their browser window, the size would resize consistantly.

I'm not exactly sure if this is what you're asking.

Member Avatar for mreisman

I have everything inside of one table I put the width to 100% but for some reason or other I can't get it to be what I am looking for. You can view my webpage at http://www.mdrideas.com

Member Avatar for DaveSW

If the items inside your table cells are of fixed width then you need to ensure they're small enough to allow the table to shrink - I think some of your graphics are your limiting factor.

Member Avatar for Dani

I'm confused as to what you're trying to do. What do you want it to look like that it doesn't right now?

Member Avatar for Member #46692

>I'm confused as to what you're trying to do. What do you want it to look like that it doesn't right now?

Err, less tacky maybe. Tee he he.

No seriously. In order to get it to conform to all resolutions, you have to think about having a dynamic banner. That's what most of the big guns do.
Take www.symantec.com. It looks reasonable when viewed at different resolutions. All they do is have a banner which grows and shrinks depending on the resolution. I think DaveSW was telling me this some time ago. Design in CSS also helps.


Design your site to be viewed using the smallest resolution, and it should look ok across most resolutions.


You can detect screen resolution easily. I think there's a script at javascript.com?

Member Avatar for DaveSW

>All they do is have a banner which grows and shrinks depending on the resolution. I think DaveSW was telling me this some time ago. Design in CSS also helps.

Me? would I tell anyone something like that? Well possibly... lol

You can specify the dimensions of your images as a %, which might help you to resize that middle graphic.

Member Avatar for Dani

Use CSS to tile a background in a 100% div. :) So does that make DaniWeb tacky? ;)

Member Avatar for Member #46692

>Use CSS to tile a background in a 100% div. So does that make DaniWeb tacky?

Hell yeah, but it's the colors as well. I'll forgive you because most girls like dat horrible purple-ee lilac color. Yucky. :cheesy:

On a side note did you get my PM cscgal, too busy or just ignoring me?

Member Avatar for havilah

Use CSS to tile a background in a 100% div. :) So does that make DaniWeb tacky? ;)

Dani,
does this explain why some site look like a mass of one off graphic image with a shadow on the background?

Member Avatar for DaveSW

Not sure what you're asking, but this link might help:

Member Avatar for HI2Japan

No offense mreisman, I know you did not put this in the critique page, but get rid of the marquee and the animated gifs. In case you didnt know the marquee tag does not work in Netscape so even if the table and everything else resized, the page wouldn't work as you intended.

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.