Skip navigation
rmarsh9374
Currently Being Moderated

Still Learning...

Jun 12, 2013 10:02 AM

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.

 

Thanks

Ryan

 

Dreamweaver 5.5

 
Replies
  • Currently Being Moderated
    Jun 12, 2013 10:07 AM   in reply to rmarsh9374

    What's the address of the current website?

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 10:28 AM   in reply to rmarsh9374

    I don't see any media queries in that site. That is a fixed-width centered layout.  Have you given us the correct URL to the site you're working on?

     

     

    Nancy O.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 10:58 AM   in reply to rmarsh9374

    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]>

    <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>

    <![endif]-->

     

    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.

     

    -Mark

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 12:57 PM   in reply to rmarsh9374

    OK, in your <head> region, you have an opening style section that begins like this:

     

    <style type="text/css">

     

    That is line 15.

     

    In Dreamweaver create a new document File>New, choose Blank Page, choose CSS.

    Click Create.

     

    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:

     

    @charset "UTF-8";

    /* 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.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 1:24 PM   in reply to rmarsh9374

    DW would NEVER put files into the Templates folder unless you told it to. Nothing should be in the Templates folder except for the templates themselves.

     
    |
    Mark as:
  • Currently Being Moderated
    Jun 12, 2013 5:02 PM   in reply to rmarsh9374

    Open your Template file.

     

    1. In Code View, select the link to the style sheet. That will be everything within the "" (quotes).
    2. Right-click
    3. In the context-sensitive menu, choose Code Hint Tools>URL Browser
    4. A "browse…" button will appear just below the link.
    5. Browse to the actual style sheet in your local defined site.
    6. Click on the style sheet.
    7. Dreamweaver will insert the proper link to the file.
    8. Repeat for each style sheet.
    9. Save the Template.
    10. You do want to update all pages.
    11. Upload entire website.

     

    Done.

     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (1)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points