An HTML page with screen-wide header, limit-width content, flexbox logo elements, and sticky footer
I've been struggling with this site to behave correctly on both desktop and mobile. At first, the header background image wasn't stretching as intended, then the flexbox header logo elements, then the sticky footer. But at no point they have all worked together. The sticky footer code I was using was probably too esoteric, so I have removed it completely. The problem is difficult to describe, so I have created desktop and mobile mockups. Note that the second flexbox div ("Register today") moves out of the header, stretches, and attaches to the bottom on mobile.
The current issues are:
Moving Div #2 ("Register today") in the flexbox outside the header in mobile view and stretching it to content width. This is probably impossible, because a flexbox by definition has to contain all its divs. So Div #2 should probably be hidden on mobile and something else shown in its place for "Register today"
Coming up with code for a sticky footer that will be compatible with all this
Please ask in the comments if something needs to be clarified, and I will edit the question accordingly.
Desktop layout
Mobile layout
html {
max-width: 800px;
margin: 0 auto;
}
body {
background-image:url('/img/bg.png');
background-repeat:repeat-x;
}
header {
display:flex;
flex-wrap: wrap;
height:116px;
background-color:grey;
justify-content:space-between;
align-items:center;
}
#logo {
margin-left:15px;
}
#register {
margin-right:35px;
}
#register a{
color:white;
text-decoration:none;
font-weight:bold;
font-size:x-large;
}
/*#content
{
margin: 0px 15px 0px 15px;
}
*/
footer
{
text-align:center;
font-size:small;
}
#copyright{
}
@media only screen and (orientation: portrait) {
html{
padding-right:15px;
padding-left:15px;
}
#logo {
margin:0;
}
#register {
background:blue;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css.css">
</head>
<body>
<header>
<div id="logo"><a href="/" title="Home"><img src="/img/logo.png" srcset="/img/logo.png 1x, /img/logo2x.png 2x" width="354" height="85"></a></div>
<div id="register"><a href="/register">Register today!</a></div>
</header>
<div id="content">
<h1>Text content</h1>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p>
</div>
<footer>
<div id="copyright">© Copyright 2019 Copyright footer. Privacy policy</div>
</footer>
</body>
</html>Basically this is the layout you want: https://pj0z6.csb.app/ (if your browser doesn't shrink below 600px width, just set the devTools to the right or left and make it wider so your View Port is smaller; less than 600px for this example).
Resize the window to under 600px width to see the responsive (mobile) layout. You can't see it working well in the stack overflow editor, that code however is the same. Or you can see it here on codesandbox (doesn't let you resize the window easily though, hence the 1st link).
600px viewport width is just a rough number, you can modify it. Basically all the styling code outside the media query is for responsive/mobile - under 600px View Port (VP) width (or your portrait media query); all the code inside is for above 600px VP width (min-width: 600px as in, minimum 600px width, apply this styling).
I see you wanted to centre your content vertically. That probably could be done. The lazy way, through JS, or with more thought some CSS magic. If you really want that, you can do it yourself.
As for the transition, since you only provided the mobile layout and desktop, and not between, I made the desktop code apply at 600px, but certain elements are 100% width until they max out at your defined 800px.
Enjoy.
body {
font-family: sans-serif;
}
html,
body {
height: 100%;
margin: 0;
}
.wrapper {
min-height: 100%;
/* Equal to height of footer */
/* But also accounting for potential margin-bottom of last child */
margin-bottom: -50px;
}
header {
background-color: orangered;
height: 100px;
display: flex;
justify-content: center;
}
header .join-link {
display: none;
}
.header-wrap {
align-self: center;
}
.logo img {
display: block;
}
.join-link {
text-align: center;
background-color: greenyellow;
}
section {
padding: 0 20px;
}
footer,
.push {
height: 50px;
}
footer {
text-align: center;
background-color: aqua;
line-height: 50px;
}
/* DESKTOP */
@media (min-width: 600px) {
header {
display: flex;
justify-content: center;
}
.header-wrap {
max-width: 800px;
width: 100%;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.logo {
margin-left: 20px;
}
.join-link {
display: none;
}
header .join-link {
display: block;
margin-right: 20px;
align-self: center;
}
section {
max-width: 800px;
width: calc(100% - 40px);
}
footer {
max-width: 900px;
width: 100%;
}
section,
footer {
margin-left: auto;
margin-right: auto;
}
}<html>
<body>
<div class="wrapper">
<header>
<div class="header-wrap">
<div class="logo">
<img src="https://placekitten.com/200/50" alt="logo" />
</div>
<div class="join-link">
<a href="#">Join us</a>
</div>
</div>
</header>
<div class="join-link">
<a href="#">Join us</a>
</div>
<section>
<h1>Content section</h1>
<p>Recusandae eius et distinctio numquam ut culpa. Facilis eligendi molestiae rerum esse. Dolorem nostrum distinctio voluptas. Rerum iste et tenetur necessitatibus. Quidem voluptas quo omnis recusandae aut eum totam omnis. Repellendus blanditiis corporis ut aliquid sunt aut cupiditate aliquam.</p>
</section>
<div class="push"></div>
</div>
<footer>
This is the footer
</footer>
<script src="src/index.js">
</script>
</body>
</html>