Mobile first, Responsive Baby Steps

#1

Hello everyone and thanks for the help in advance. I trying to learn responsive, mobile first design and am working on a page located at http://www.marthawashingtonsalon.com/home/responsive. I’m trying to work on the very basic stuff of getting to have the page center horizontally (using

body 
        {
	        background:  #DE6700 url(../images/global/bg.jpg) repeat-y scroll 50% top;
	        margin:  0px auto;
	        text-align:  center;
        } 

but that is not working. I’m also using a fixed size logo that will likely cause me problems in the future. I’m also having to use fixed min-height for the article section. I’m thinking I need to clean this mess up before going any further. Any help would be appreciated.

as well as managing the vertical filling of the article section

#2

You need to apply your margin: 0px auto; rule to #pagecontainer, rather than to the body.

#3

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>
6 Likes
#4

Try creating the following validation link and validate frequently to avoid other browsers rendering inconsistencies.

https://validator.w3.org/nu/?doc=http%3A%2F%2Fwww.marthawashingtonsalon.com%2Fhome%2Fresponsive&showsource=yes&showoutline=yes

Also if using Firefox try this excellent html validation addin because it instantly validates the page and if all is well a green icon is shown otherwise amber or red icon.

#5

Thank you so much for the detailed and helpful response. Obviously it works, but I am still parsing through each piece to understand the concepts. Would you please explain the box-sizing entry for the whole page and why it is necessary. I realize this adds the borders to the height/width calculations, but this seems to have a larger effect. I’m looking at https://developer.mozilla.org/en-US/docs/Web/CSS/box-sizing, but not fully understanding it.

#6

It is not necessary but it is easier.

It just means that when you set a width on an element you know that the width is always the same even if you add padding and borders.

If for example you had 2 * 50% width floated elements and they had 20px padding and 1px borders then there is no way you could make them fit next to each other unless you used the border-box value.

Basically padding and borders make the whole thing bigger in the normal box model which would still allow 50% just for the content. The border-box model keeps the whole element to 50% but reduces the space inside the element where content is stored.

In most cases is does not matter which model you use as long as you know the differences but I find the border-box method so much easier.

#7

Thanks again for the help. I’ve been pulling apart the example to understand things better. Two more questions. First. I sort of understand using display: flex and display: column but how do you decide to use this instead of grid or simply a div tag set to 100% of the viewport? Second question is how to handle the sizing of the logo. Is this typically handled with a media query to determine the sizing of the logo. Or some other technique.

Thank you for all of your help.

#8

Flex has better support than grid and is a little easier to use. They can both do similar things but a simple way to explain is that flex is more concerned with a one axis layout whereas grid can align rows and columns (both axis) at the same time.

Therefore you use whichever method is easiest to produce the layout you want. Sometimes that may not even be grid or flex.

A lot of the time what you use is decided by the layout you require and your experience in css. There are many ways to do things in css but practice and experience will tell you what is right for the job in hand.

Grid is brilliant at what it does but is overly complex for most people and a nightmare to refactor later.

Keeping things simple is still the best approach.

You don’t need to do much other than set a max width and height auto. You can use media queries if you want it more adaptive rather than responsive but there are no hard and fast rules. It all depends on what you want to achieve.

#9

OK. So now I head into the stupid questions. For pages like https://flayld.org/health-wellness/ that fill a full screen, yet scale down for mobile, including slideshows, etc. where do I need to go? It seems like so many of these pages involve things like Bootstrap, which seems to be its own technology by itself. Should I just keep augmenting the template you showed me?

#11

There are many slideshows around and creating a good slideshow is quite complicated so you would be better getting one of the shelf. Just make sure you find a responsive one and test thoroughly (do a search through the forums as this question has been asked before).

Don’y use bootstrap until you have learned css. Once you have learned css you probably won’t need bootstrap anyway. It’s a large framework that works best for teams where a documented systematic approach is essential. Too many beginners latch on to bootstrap but don’t know enough about CSS in order to use it properly.

Learn and hone your CSS/Html craft first and then learn other approaches like bootstrap.

That would be the best way to learn :slight_smile:

5 Likes
#12

Thank you again. I will work on my CSS/Html skills. I appreciate the help.