0

I'd like to use a centered, single-column HTML/CSS layout similar to stackoverflow's for both, desktop and mobile use, i.e. very different screen widths and resolutions. I'd like to avoid having to use code (client or server) to detect and handle devices differently (i.e. deliver different layouts / styles).

The layout

  • should be centered (currently using centered div using auto property for left and right margins - this requires a fixed width)
  • should be variable width depending on device screen width, i.e. a comfortable column width on desktop computer but full width on mobile
  • will have header bar that visually extends to the window edges (same as stackoverflow's) and a have footer that should be at the bottom of the page, even if there's not much content (for this, CSS Single-column layout centered fixed-width 100% height w header and footer may have an answer)

Can this be achieved based on a simple centered div such as the following or what is the state-of-the-art? The following is rendered tiny on Firefox for Android:

#center {
  margin: 0 auto 0 auto;
  width: 10em;
  
  background-color: gray;
}
<div id="center">
Content div<br/>
<ul>
<li>should be centered</li>
<li>should be variable width depending on device screen width, i.e. a comfortable column width on desktop computer but full width on mobile</li>
<li>will have header bar that visually extends to the window edges and a have footer that should be at the bottom of the page, even if there's not much content (for this, https://stackoverflow.com/questions/23651942/ may have an answer)</li>
</ul>
</div>

Note I'm using 10em for the width (to make it fit in the snippet editor preview) - is there a more appropriate unit or additional properties for an "absolute" size to ensure readability (and sizing) on all screens?

Desktop:

Mobile:

handle
  • 5,859
  • 3
  • 54
  • 82
  • stackoverflow is doing it right (though they seem to be delivering a different "app"), this post is perfectly readable on my smartphone (full width), but unfortunately the code snippet does not appear to have the "Run code snippet" function there. – handle Dec 11 '19 at 09:58
  • Apparently what I am looking for is called "responsive web design" - this resource seems to give a good overview: https://www.w3schools.com/html/html_responsive.asp – handle Dec 11 '19 at 10:22

1 Answers1

1

The awswer you found already gave a big hint in what you should be using for this, namely display: flex;. Building on top of the fiddle provided there, you could do something like this:

Which is giving the main content column a 100% value of width in combination with a max-width of, let say, 768px. In this example flex-grow:1; is used to fill up the height completely but maybe not be necessary for your project.

html, 
body {
height:100%; 
padding:0; 
margin:0; 
width:100%;
}
body {
display:flex; 
flex-direction:column;
}
#main {
flex-grow:1;
background:#f3f3f3;
max-width: 768px;
width:100%;
margin:auto;
}


header {min-height:50px; background:green;}
footer {min-height:50px; background:blue;}
<header>header</header>
<div id="main" role="main">content</div>
<footer>footer</footer>
Web Tailor
  • 371
  • 1
  • 6
  • I'll have a look, thanks. What's the `role` attribute in your div? Is it custom? I could not find it on https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes or https://developer.mozilla.org/en-US/search?q=attribute+role – handle Dec 11 '19 at 10:15
  • 1
    You can find more on the role attribute in this great answer: https://stackoverflow.com/questions/10403138/what-is-the-purpose-of-the-role-attribute-in-html In this case, being 2019, it's a bit redundant. The role attribute came from the answer I copied it from. – Web Tailor Dec 11 '19 at 10:22