Member Avatar for loveforfire33

Hi,
maybe im searching for the elusive obvious or maybe im blind...
long story short, i have been coding using css templates for a while now, putting off the issue of screen resolution. something that has allways been a issue for me. using the templates has allowed me to ignore this issue.

but now its time to bite the bullet. can anoyone suggest either methods, techniques, or any other resources that i can use to learn all there is i can about laying out css for diferent resolutions?

any help will be appriciated :)

XX

  • 3 Contributors
  • 2 Replies
  • 108 Views
  • 1 Month Discussion Span
  • Latest Post Latest Post by tungnk1993

Dani AI

Generated

Building on comments from , and , move beyond a simple "percent vs pixel" choice and adopt a responsive workflow: a fluid container that caps at a sensible max-width, flexible children (Flexbox or Grid), and a small set of content-driven breakpoints. That pattern keeps layout predictable across resolutions while avoiding brittle fixed widths.

Practical CSS sketch:

/* fluid centered container */
.container {
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  box-sizing: border-box;
}

/* responsive columns with Flexbox */
.row { display: flex; flex-wrap: wrap; }
.col { flex: 1 1 300px; min-width: 220px; }

/* simple breakpoint to stack columns */
@media (max-width: 720px) {
  .col { flex-basis: 100%; }
}

A concise workflow: build mobile-first base styles (use rem for type), lay out components with Flexbox or Grid, add breakpoints where content needs a different flow, and make images/media responsive (use srcset/picture). Test in the browser device toolbar and on actual devices; pick breakpoints based on where the design breaks, not on specific device names. See MDN for media queries and responsive images for implementation notes: Media Queries and Responsive images.

Common gotchas: fixed-width children (images, iframes) that overflow, forgetting box-sizing: border-box, and relying on too many arbitrary breakpoints. For component-level responsiveness, consider modern container queries as an alternative to global breakpoints: Container Queries.

Recommended Answers

All 2 Replies

Member Avatar for twiss

Well, it depends a bit on what exactly you want to make. If you want a dynamically-sized website, use percentages. If not, the main parts of your website should (IMO) use the full width of the screen, or have a fixed width and be centered. If you have specific issues, feel free to post them (with code).

Member Avatar for tungnk1993

As there are different resolutions, using percentage instead of pixel. One possible way is to work out the pixel first, then calculate the percentage of pixel over your current resolution. This way it should look proportionally the same on other resolutions as well.

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.