Our Mobile CSS Sheet
We better get our mobile sheet going. I copied my mobile sheet on to here. Have a look through there and I will explain at bottom. When the users screen
is 999px or less, this sheet will be applied causing the page to display better. This needs to go on a blank sheet and saved as ourmobile.css
Also, A big accomplishment. CONGRATULATIONS!! This is the last page for our template. After you are done this page, save it as a template and you can
copy and paste it to as many new pages as you want. I think it is a nice easy template. Now the main concentration can be to put content on it.
When done this page, click the link at the bottom and collapse your browser to see what happens when the screen gets narrow.
Mobile Sheet
body {
}
#wrapper {
width:100%;
}
header {
width:100%;
}
.navbar a {
float:none;
display:block;
width:100%;
border-bottom:solid 2px black;
box-sizing:border-box;
}
article a {
font-size:16pt;
width:100%;
}
article {
width:100%;
}
footer {
width:100%;
}
h1 {
font-size:150%;
}
h2 {
font-size:125%;
}
h3 {
font-size:110%;
}
* {
word-wrap:break-word;
}
- I changed the width to 100% on the wrapper, header, navbar a, article and footer. Rather than the 960px wide wrapper on the other sheet. This will make the webpage span 100% the width of the mobile device and since we are using box-sizing:border-box; , all the margins, borders and padding will stay within that 100% instead of pushing it out.
- I added clear:left to the navbar a selector. That clears the float:left that is on the main style sheet under navbar a. This will enable the menu links to stack up. They would never stack up otherwise. They would just continue to flow like text unless we clear the float:left.
- I also added display:block to the navbar a selector. This will make a inline element display as a block element. I added width:100% so it spans the whole width of the device.
- I added box-sizing: border-box to the navbar a selector.
- I added border-bottom:solid 2px black; to the navbar a selector. This puts a black border at the bottom of the navigation buttons.
- I used percentage and changed the font-size on the h1, h2 and h3 headings. I adjusted them til I was satisfied. Also to add a note on the h1 to h3. You can center those by adding text-align:center; to there styling on the main style sheet. You will find more on text on the Html & CSS for Text page.
-
I came back and added word-wrap:break-word;. I applied to the whole page on the mobile device. It will make a word break in the middle of the word and go to the
next line so it does not overflow
out of the container. Normally there has to be a space, like between two words for the line to go to the next line. The problem I have had is writing samples of code
which do not have any spaces so it does not wrap to the next line. Instead it overflows the container past the right border. Another issue I found similar is when your
mobile sheet is text-align:justify;. Justify makes the right and left of a paragraph line up exactly so it looks neat. But in order to do that it has to make more space
between words to make it line up on the right side. That makes your mobile sheet look bad. That is why I changed most of my alignment to text-align:left;. That gets rid of
that big space that comes up between words. I just started experimenting with word-wrap:break-word; If you don't want it there, just remove it.
To see what it looks like so far Click Here(opens a new window) and then collapse your browser to see the mobile styling.