patternjavascriptMinor
Demo of advertisment website
Viewed 0 times
websiteadvertismentdemo
Problem
A fully functional demo URL:
Note that in FireFox there is a small horizontal scrollbar bug which I have fixed at home.
HTML:
```
Welcome to Scirra.com
Home
Forum
Contruct
Arcade
Manual
Support
Contact
Homepage
Construct
Products
Community Forum
Contact Us
Scirra software allows you to bring your imagination to life
Export your creations to HTML5 pages
Another description of some image
Something motivational to tell people
Latest from Twitter
The news on the block is this. Something has happened some news or something. About 6 hours ago
Another thing has happened lets tell the world some news or something. Lots to think about. Lots to do.About 6 hours ago
Shocker! Santa Claus is not real. This is breaking news, we must spread it. About 6 hours ago
http://69.24.73.172/demos/index.htmlNote that in FireFox there is a small horizontal scrollbar bug which I have fixed at home.
HTML:
```
Welcome to Scirra.com
Home
Forum
Contruct
Arcade
Manual
Support
Contact
Homepage
Construct
Products
Community Forum
Contact Us
Scirra software allows you to bring your imagination to life
Export your creations to HTML5 pages
Another description of some image
Something motivational to tell people
Latest from Twitter
The news on the block is this. Something has happened some news or something. About 6 hours ago
Another thing has happened lets tell the world some news or something. Lots to think about. Lots to do.About 6 hours ago
Shocker! Santa Claus is not real. This is breaking news, we must spread it. About 6 hours ago
Solution
-
You should add the meta viewport tag to ensure mobile browsers have a good standard viewport:
-
You should specify
-
Something small: If you have a hex-based color value like
-
Ommit the unit for zero values like
-
You're resetting the margin on a lot of elements. Group this together to decrease repetition:
If you want to set a bottom margin, you only need
-
For clearfixing, you don't need a new
-
There is no reason to prefix
For the time, I'll stop here. I'd be great to hear some feedback. I have a few things in mind, but I don't know if you want to go this deep. No offense. ;) Feel free to ask questions, if you have them.
You should add the meta viewport tag to ensure mobile browsers have a good standard viewport:
-
You should specify
sans-serif as the last resort for your font stack. Also if you want Helvetica to be used, move it to the front. If not, you can simply leave it out. That's because one can assume that on every system where Helvetica is installed, there is also Arial.font-family: Helvetica, Arial, Verdana, sans-serif;-
Something small: If you have a hex-based color value like
#0066ff, #ffffff or #000000 for example, you can write the shorter version: #06f, #fff and #000-
Ommit the unit for zero values like
0px: box-shadow: 0 0 5px #555;-
You're resetting the margin on a lot of elements. Group this together to decrease repetition:
h1, h2, h3, h4, h5, h6,
p, blockquote {
margin: 0;
}If you want to set a bottom margin, you only need
margin-bottom: 10px;, not margin: 0 0 10px 0;-
For clearfixing, you don't need a new
div element. Add the following rule declaration to your CSS and add clearfix to the element you need to fix. (e.g. a navigation with floated items)clear:after {
content: "";
display: table;
clear: both;
}-
There is no reason to prefix
border-radius anymore. You can use the unprefixed version safely.For the time, I'll stop here. I'd be great to hear some feedback. I have a few things in mind, but I don't know if you want to go this deep. No offense. ;) Feel free to ask questions, if you have them.
Code Snippets
<meta name="viewport" content="width=device-width, initial-scale=1.0">font-family: Helvetica, Arial, Verdana, sans-serif;h1, h2, h3, h4, h5, h6,
p, blockquote {
margin: 0;
}clear:after {
content: "";
display: table;
clear: both;
}Context
StackExchange Code Review Q#1077, answer score: 8
Revisions (0)
No revisions yet.