I work for a small company, and my boss wants me to make our site look right on all devices. So I am getting to brush up on HTML and Learn CSS. The topic to make it look right is called Media queries right? I watched an adobe video on it and it seemed straight forward, but It never really showed on my screen like the video. Did I miss somthing? Is there more code I need to add?
Any tutorials etc would be great.
I was hopeing to just modify our current site and have to start over. I assume that since this site is done with a Template I need to apply the Media queries to it.
The reason why this does not look the same on all browsers is because this is an HTML5 website and Microsoft's outdated browsers do not render HTML5 correctly.
You need to insert four lines in the <head> section of your website to take care of this:
<!-- include CSS before the Shiv -->
<!--[if lt IE 9]>
Actually three, the first is a comment.
Now, you also have your CSS in your document and, personally, I prefer my CSS in its own separate document with a link to it thusly:
<link href="css/main.css" rel="stylesheet" type="text/css" media="all">
And your document is a templatted one. So you will need to create your separate style sheet as well as add the HTML5 Shiv in your template and then update all pages on your website when you save the template.
And oh, by the way, the home page has errors on it as checked by the experimental W3C HTML5 Validator.
OK, in your <head> region, you have an opening style section that begins like this:
That is line 15.
In Dreamweaver create a new document File>New, choose Blank Page, choose CSS.
You don't need the comment in line 16 in your HTML document.
select from line 17 through 185.
Cut it from the HTML document.
Paste it into the CSS Document after the first two lines where it says:
/* CSS Document */
Now, you need to save that CSS document. I'd call it style.css.
But here is what I find confusing. You have three style sheets for your web page that I cannot find—either because they are not uploaded or you have the wrong path to them:
Look at lines 190 to 195:
<!-- Phone -->
<link href="3scphone.css" rel="stylesheet" type="text/css" media="only screen and (max-width:320px)">
<!-- Tablet -->
<link href="3sctablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width:321px) and (max-width:768px)">
<!-- Desktop -->
<link href="3scdesktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:769px)">
When I went looking for these, I get 404 (not found) errors. These are proper links to what should be style sheets. You may be able to delete the style section entirely if these sheets can be located.
I think Lines 190 to 195 came from a clicked on the Media Queries button in Dreamweaver. It looks like thoes stylesheets are in the template folder. I am assuming DW did this because the pages came from a template.
should I just put lines 17-185 in to the 3scdesktop.css file?
Open your Template file.