Member Avatar for Bluepeter9

I use CSS and HTML and have basically designed the sites I am responsible for for 1028px width and they look ok on smaller resolution screens but poor on higher resolution screens - I suspect that this is because I use mainly fixed widths and px sizing and suspect I need to use % and ems to make it 'scale up' - anyone got a link to a tutorial or dicsussion on bes practise

  • 3 Contributors
  • 2 Replies
  • 121 Views
  • 1 Week Discussion Span
  • Latest Post Latest Post by Member #334542

Dani AI

Generated

’s observation about a 1028px fixed layout appearing small on high‑resolution screens is a common symptom of using pixel‑locked containers. and are on the right track: relative units and a centered container help, but the practical pattern that works today is a fluid container capped with a sensible max‑width, combined with relative typography and a few breakpoints so the design adapts instead of simply stretching.

A concise, reusable pattern:

:root { font-size: 16px; } /* base for rems */
.container {
  width: 100%;
  max-width: 1200px;   /* caps growth on large screens */
  margin: 0 auto;      /* centers on wide viewports */
  padding: 0 1.25rem;  /* keeps side gutters */
}
img, video { max-width: 100%; height: auto; display: block; }
h1 { font-size: clamp(1.5rem, 2.5vw, 2.5rem); } /* fluid but capped */

Notes and practical tips:

  • Use rem for global type sizing and em for component-relative scaling (rem is easier to reason about). Fluid typography via clamp() or min()/max() keeps text readable at different widths; see the examples in the linked resources below.
  • Cap the layout with max-width so very large screens don’t create long line lengths; keep gutters with padding rather than fixed side margins.
  • Make images and controls responsive (max-width:100%) and provide higher‑density versions using srcset/picture or SVGs for crisp results on high‑DPI monitors.
  • Add breakpoints to change column counts or stack content at defined widths rather than trying to scale everything proportionally.

References for patterns and background: MDN — Responsive design, Ethan Marcotte’s original explanation at A List Apart, and practical fluid type techniques at CSS-Tricks.

Recommended Answers

All 2 Replies

Member Avatar for MJ Pieterse

you should always try and use % and em. fixed widths are okay but fonts should always be in em.

you can go to w3schools. they have good tutorials on there that follows strict web standards.

Member Avatar for Member #334542

Even you used fixed widths, you should have all the tags within the container to make it center for higher resolutions without losing their original quality.

Edited by Member #334542 because: n/a
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.