Hello. I am looking at the page template that I created long ago, and trying to modify it so that it will be responsive.
Below is a revision of my old, non-responsive page template…
<!DOCTYPE HTML>
<html lang="en">
<!-- ************************* HTML HEAD ********************************* -->
<head>
<!-- METADATA -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
<!-- TITLE -->
<title>sp_pageWrapper.html</title>
<!-- CSS STYLES -->
<style media="screen">
*{
margin: 0;
padding: 0;
}
html, body{
height: 100%;
}
#pageWrapper{
position: relative;
display: block;
min-height: 100%;
max-width: 1200px;
/* min-width: 800px; /**/
margin: 0 auto;
}
#pageInner{
position: relative;
width: 100%;
overflow: hidden;
}
#mast{
padding: 5px 0 0 0;
}
#topRow{
display: flex;
align-items: baseline;
padding: 0 0 5px 0;
line-height: 1.4;
}
#logo{
font-family: Georgia, Times New Roman, Serif;
font-size: 2.1rem;
font-weight: normal;
}
#menuLinks{
margin-left: auto;
}
#topMenu{
/* width: 1200px; /**/
width: auto;
display: flex;
flex-wrap: wrap; /* Added 2020-01-02 */
list-style: none;
background-color: #48D1CC; /* Medium Turquoise */
}
#topMenu li{
padding: 0.5em 1em;
background-color: #48D1CC; /* Medium Turquoise */
}
#topMenu li.menuCurrent{
border: none;
background-color: #008B8B; /* Dark Cyan */
}
#pageBody{
position: relative;
max-width: 100%;
margin: 30px 0 0 0;
background-color: #EEE;
}
</style>
</head>
<!-- ************************* HTML BODY ********************************* -->
<body>
<div id="pageWrapper">
<div id="pageInner">
<!-- MAST -->
<div id="mast">
<!-- Top Row -->
<div id="topRow">
<h1 id="logo">Bob's Hardware</h1>
</div>
<!-- Top Menu -->
<ul id="topMenu">
<li class="menuCurrent">Home</li>
<li>Nuts</li>
<li>Bolts</li>
<li>Washers</li>
<li>Screws</li>
</ul>
</div><!-- End of MAST -->
<!-- CONTENT BODY -->
<div id="pageBody">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam id justo rhoncus, finibus nisl sit amet, pretium nibh. Aliquam nec turpis auctor justo fringilla aliquet et vitae magna. Vestibulum est mauris, condimentum id pulvinar sed, volutpat eu massa. Morbi cursus lacus in lectus venenatis gravida. Ut facilisis mollis hendrerit. Maecenas a nunc erat. Quisque erat arcu, facilisis sed consectetur vel, efficitur at quam. Pellentesque semper est nec arcu imperdiet, id facilisis neque luctus. Cras in rutrum ante, nec fringilla tortor. Pellentesque ac nibh volutpat, bibendum mi non, ultricies nisl. Sed malesuada condimentum nunc ut imperdiet. Pellentesque faucibus eu lorem aliquam volutpat. Duis gravida aliquet ultricies. Nam eu tempus lectus.</p>
<p>Duis semper commodo gravida. Aenean dolor mauris, laoreet nec tempus id, congue vitae enim. Morbi at ultrices nisl. Maecenas quis lorem sollicitudin, fringilla elit eget, mollis velit. Morbi gravida consequat nisl, eget accumsan velit. Ut feugiat quis diam ac aliquam. Aenean ornare placerat hendrerit. Donec vel nulla quis sapien laoreet dictum et id nulla.</p>
<p>Donec eleifend porta ullamcorper. Sed diam tortor, ornare vel gravida non, tristique in sem. Sed vel condimentum odio. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis eros libero, gravida at egestas ac, ultricies in erat. Vestibulum condimentum lorem in erat mollis, in fermentum orci consectetur. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vestibulum venenatis pulvinar ullamcorper. Etiam sollicitudin vitae metus vel posuere. Quisque viverra, libero id egestas consequat, ipsum lorem varius arcu, semper condimentum ex eros id ex. Curabitur tincidunt felis ultrices, blandit ipsum in, vestibulum mauris.</p>
<p>Nam ullamcorper diam nunc, sed dignissim augue lacinia ac. Quisque bibendum ipsum consequat, aliquet metus a, tempor elit. Suspendisse porta dui eget lacinia maximus. Donec non sem aliquet, varius urna sit amet, rhoncus dolor. Curabitur nulla sem, finibus sit amet aliquam in, viverra vitae dolor. Suspendisse quis luctus massa, at rutrum ante. Etiam pharetra, metus tempor pharetra molestie, magna dui iaculis ligula, vel suscipit libero odio nec orci.</p>
<p>Cras condimentum feugiat urna, sagittis viverra lacus consectetur at. Morbi id ex eget urna fermentum tempor ac a enim. Fusce sed vestibulum ipsum. Nunc convallis, ex ut fringilla euismod, dolor felis fringilla mauris, eget bibendum urna justo ut est. Donec consectetur sapien non ultricies viverra. Nam congue vel dolor nec iaculis. Pellentesque imperdiet nibh risus, at facilisis metus aliquam porttitor. Mauris malesuada nec nisi ac pellentesque. Vivamus cursus feugiat mi, at interdum magna suscipit a. Suspendisse potenti. Donec lacinia posuere ex sit amet interdum. Aliquam nec ex mi. Vivamus nec euismod tellus. Vestibulum rhoncus placerat sollicitudin. Nam facilisis non metus ut tincidunt. Vivamus eget semper elit.</p>
</div>
</div>
</div>
</body>
</html>Questions:
1.) Is my #pageWrapper okay?
2.) Any idea why I would have put a min-width on #pageWrapper?
3.) Any idea why I would have created #pageInner?
Does it serve any useful purpose?
4.) Does #pageWrapper have to be a Flexbox to make my web pagesresponsive?
