Think about your html first as you are not using html very semantically. Html elements have a purpose and you don’t just throw divs or spans at elements. Use the most appropriate element for the job in hand following best practices.
e.g. Headings should use heading tags in a logical order. paragraphs would be inside p elements and not inside spans.
Also avoid the use of ids as selectors because that makes specificity much harder. Use simple classes and avoid names like divlogo as you don’t need to mention the div and indeed if you want the element somewhere else later it just makes things look silly.
Avoid directly changing the styles of elements that may be used in different situations and instead add a class to the element.
e.g. don’t say ul{background:red}
That would change all lists and not something you would likely want. Instead just add a class.
e.g. .nav{background:red}
Avoid fixed widths and instead use a max-width and then you have an instantly responsive page. A fixed px width is never responsive. Avoid widths and heights where possible for elements that contain fluid content like text.
Your min-height 600px on your article would be nonsense on an iphone. Use methods that adapt more easily and don’t need magic numbers.
Here’s a start for your page.
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width" >
<title></title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
body {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
html, body {
margin:0;
padding:0
}
body {
background: #DE6700 url(../images/global/bg.jpg) repeat-y scroll 50% top;
}
.pagecontainer {
max-width: 760px;/* why so small ? */
margin:auto;/* centre it */
display:flex;
flex-direction:column;
min-height:100vh;
background-color: white;
}
.header {
color: white;
background-color: rgb(46, 83, 102);
font-size: 1.3em;
font-weight: bold;
display:flex;
align-items:center;
}
.logo {
margin-right:10px;
}
.logo img{max-width:100%;height:auto;display:block;}
.banner {
font-size: 1.rem;
margin:0;
text-align:center;
flex:1 0 0%;
}
.main {
font-size: 1rem;
font-weight: bold;
color: black;
padding:10px;
}
footer {
margin-top:auto;
font-size:.8rem;
font-weight: bold;
color: black;
padding:10px;
text-align:center;
border-top:1px solid #000;
}
@media screen and (max-width:660px){
.banner{font-size:1.5rem}
}
</style>
</head>
<body>
<div class="pagecontainer">
<header class="header">
<div class="logo"> <img src="http://www.marthawashingtonsalon.com/images/MWS_Logo_130x130.png" alt="my logo" width="130" height="130"> </div>
<h1 class="banner"> Wit, Wisdom, Knowledge </h1>
</header>
<main class="main"> <h2><span class="word-syllables">sa·lon</span> : a fashionable assemblage of notables (such as literary figures, artists, or statesmen) held by custom at the home of a prominent person</h2></main>
<footer><p>Copyright Martha Washington Salon. 2019. All rights reserved.</p> </footer>
</div>
</body>
</html>
