I've been facing challenges in making this website responsive on both desktop and mobile devices. Initially, the header background image wasn't displaying as intended, followed by issues with the flexbox logo elements in the header and the sticky footer. Unfortunately, these components have not functioned properly together. I decided to remove the complicated code for the sticky footer. Describing the problem has proven to be quite difficult, so I have created mockups for both desktop and mobile views. Notably, the second flexbox div ("Register today") should move out of the header, stretch to fit the content width, and attach to the bottom on mobile.
Key concerns at the moment:
Moving Div #2 ("Register today") outside the header in the flexbox layout on mobile and expanding it to match the content width seems challenging. As a flexbox inherently contains all its divs, hiding Div #2 on mobile and showing an alternative element for "Register today" might be necessary
Developing code for a sticky footer that is compatible with the existing setup
If there are any queries or uncertainties, please feel free to ask in the comments, and I will update the question accordingly.
Desktop Design
https://i.sstatic.net/tLdG6.png
Mobile Design
https://i.sstatic.net/vy0RX.png
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>