I am a relatively new web designer using Dreamweaver CS6. I am aware that it is best to preview pages in an actual browser and that Dreamweaver's design and live views are only an approximation of the actual code. I usually preview my pages in IE 11 and Chrome.
My web page looks as I wish in design view, but not in live view or in the browsers.
In this case, I want "Academic Book Reviews" to display in Courier New, which it does in design view. However, in Live view and in Chrome itself "Academic Book Reviews" is in Times New Roman despite the h1 CSS command to display in Courier New.
I think this mismatch between DW and Chrome is causing me several problems in many other areas. I am attaching code and screenshots.
Full screen on my desktop is 1920x1200. I am trying to start building a responsive page from 240px and build up with breakpoints at common resolutions.
This is probably something small I am overlooking.
The top is the html in the index file. The bottom is the CSS in the styles.css file.
I have also added an image of how it looks in DW.
Thank you.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Rogers Reviews: Academic Book Reviews</title>
<link href="styles.css" rel="stylesheet" type="text/css">
</head>
<body>
<div ID="wrapper">
<header="main_header">
<img src="_images/RR_logo_phone.png" alt="Rogers Reviews logo">
</header>
<h1>Academic Book Reviews</h1>
</div>
</body>
</html>
@media screen and (max-width:320px) {
#wrapper {
width: 100%;
margin: auto;
}
h1 {
font-family: "Courier New", Courier, monospace;
}
}
@media screen and (min-width:321px) and (max-width:728px) {
}
@media screen and (min-width:729px) and (max-width:1920px) {
}
Here is the link to the image:
And DW:
put the h1 tag outside of your media queries unless you want it to only change at a max screen width of 320px :)