His: width, Mine: min-width. How can that be?

HTML & CSS
1

In the tutorial (part 10, link below), the container/wrapper is width:95%; in responsive CSS. I followed religiously until that point when my version would only respond with min-width:95%; Finding a fix on my end does not account for the author’s success with width rather than min-width. I fear that I may be missing something important. This guy would not post a video showing a non-working mark-up and then fix it “off camera”. Thanks for any comments.

2

Show us your current code please.

3

If you are following the authors example then you need to alter the width because that’s what has been set in the original rule. If you use min-width it will mean that both min-width and width are active and the widest rule will win out.

This is the basic code for the container from that video.

<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="utf-8">
<title>Untitled Document</title>
<style>
#container {
    width:960px;
    margin:auto;
    background:red;
}
@media screen and (max-width:961px) {
#container {
    width:95%;
}
}
</style>
</head>

<body>
<div id="container">
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
        <p>Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum Lorem ipsum </p>
</div>
</body>
</html>

As an aside note that the authors comments about the viewport meta tag were incorrect and you should only add the viewport meta tag when you are creating a responsive design and delivering a smaller layout to smaller devices with media queries.

4

To my respondents: I am so sorry. What a screw-up on my part. The author used “width” which worked perfectly for him. My fix was to use MAX-width, not MIN-width. I’m new at this so I need to figure out the most light-weight method of putting of the code for your inspection. I’ll go to work on that now.

Later in the morning: Sorry guys. This whole thing has gone in the toilet. In an effort to post the least amount of code provoking the horizontal scroll bar, I began with a clean sheet and inserted one block at time using his “width” rather than my max-width. It never happened. Works fine as he wrote it. I hate it when that happens. I’ll probably never know. Thanks for the interest though.

5

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.