Problem changing width of primary & secondary content to 100% for mobile device.

Question

After setting the width of primary and secondary content to 60%/40% that the width of the two sections does not return to 100% when the viewport reduces to mobile device size unless I explicitly reset the width to 100%. Could someone clue me in on how Guil's code expands the primary and secondary content to 100% for mobile size viewport?

Thank you

Answer 1 · 2015-04-07T18:11:02Z

April 7, 2015 6:11pm

Ok that was what I suspected. The problem is that IE has no support for using initial as a value in CSS. You would need to change this part of your media query:

    .main-logo,
    .main-nav,
    .main-nav li,
    .col {
        display: block;
        width: initial;
        height: initial;
        margin: initial;
    }

Instead of initial, set the width and height to 100% and set the margin to 0. It should now work in IE.

Answer 2 · 2015-04-07T11:56:58Z

April 7, 2015 11:56am

Tom, Guil uses media queries to define breakpoints where we wants the code to change. For example, if your page starts to look crowded at 600px and your divs have ids of primary and secondary, you'd use something like this:

CSS

@media (max-width: 600px) {
.primary, .secondary {
    width: 100%;
  }
}

I hope that helps! If this isn't the answer you're looking for, try posting your code or the snapshot of your workspace.

Answer 3 · 2015-04-07T11:56:59Z

April 7, 2015 11:56am

Tom, Guil uses media queries to define breakpoints where we wants the code to change. For example, if your page starts to look crowded at 600px and your divs have ids of primary and secondary, you'd use something like this:

CSS

@media (max-width: 600px) {
.primary, .secondary {
    width: 100%;
  }
}

I hope that helps! If this isn't the answer you're looking for, try posting your code or the snapshot of your workspace.

Answer 4 · 2015-04-07T16:02:23Z

April 7, 2015 4:02pm

Elizabeth and Colin, Thank you for getting back to me. I have posted the html and css below. My question is how did Guil change the width of the primary and secondary content back to 100% without resetting them in the media query?

<!DOCTYPE html>
<html>
<head>
    <title>Display Modes</title>
    <link rel="stylesheet" href="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <div class="main-wrapper">
        <header class="main-header">
            <h1 class="main-logo"><a href="#">Logo</a></h1>
            <ul class="main-nav">
                <li><a href="#">Link 1</a></li>
                <li><a href="#">Link 2</a></li>
                <li><a href="#">Link 3</a></li>
                <li><a href="#">Link 4</a></li>
            </ul>
        </header>
        <div class="main-banner">
            <h2>This is the Main Heading! How exciting...</h2>
            <p>Whoopity-doo</p>
        </div>
        <div class="primary-content col">
            <h2>Primary Content</h2>
            <p>Bacon ipsum dolor sit amet chicken pork ground round brisket corned beef ball tip shank tail salami filet mignon ham hock pork belly venison shankle. Pig kielbasa drumstick sausage pork chop boudin. Chicken t-bone salami pork chop, beef ribs kevin ham tri-tip beef venison biltong brisket.</p>
            <p>Venison strip steak meatball chicken, brisket prosciutto sirloin. Capicola drumstick brisket tri-tip salami. Chicken beef jerky, tail turkey prosciutto cow ham sirloin boudin tenderloin. Meatloaf tri-tip turducken brisket andouille, pork belly corned beef fatback hamburger.</p>
        </div>
        <div class="secondary-content col">
            <h3>Secondary Content</h3>
            <p>Strip steak tenderloin kevin swine meatloaf capicola, doner beef turducken pancetta corned beef pork loin shoulder.</p>
            <hr>
            <p>Pork filet mignon leberkas, tail swine venison pancetta turkey shoulder brisket chalkers likes hamburgers.</p>
        </div>
        <footer class="main-footer">
            <p>&copy;2014 Example Layout</p>
        </footer>
    </div>
</body>
</html>

/* style.css */
/* Page Styles
================================ */

body {
    font: normal 1.1em/1.5 sans-serif;
    color: #222;
    background-color: #edeff0;
}
/*  force footer to bottom of viewport. Stays at bottom of viewport.    */
html,
body,
.main-wrapper,
.col {
    height: 100%;
    width: 100%;
}

/*.main-wrapper {
    width: 90%;
    margin: auto;
}*/
* {
    box-sizing: border-box;
}
/* Layout Element Colors
================================ */

.main-header       { background-color: #384047; }
.main-logo         { background-color: #5fcf80; }
.main-nav li       { background-color: #3f8abf; }
.primary-content   { background-color: #caebf6; }
.secondary-content { background-color: #bfe3d0; }
.main-footer       { background-color: #b7c0c7; }

/* Header, Banner and Footer Layout
================================ */
.main-header {
    padding: 20px;
    /*display: table;
    width: 100%;
    min-height: 120px;*/
}
.main-banner {
    background: #ebedee;
    text-align: center;
    padding: 35px 15px;
}

.main-logo,
.main-nav,
.main-nav li {
    /*display: inline;  Remember that with inline there is no width or top/bottom margins.  */
                     /* Also, white space problem - tabs, line-breaks and space in coding 
                        becomes spaces on webpage.  
                        Can use negative margins to remove - but why bother ...     */
                     /* Now - wrapping problem as page shrinks.
                        Could use "whitespace: none" but then elements go off right side 
                        of page.
                        SOLUTION: Inline-Block;
                     */
    display: inline-block; /* Whitespace problem also occurs with inline-block !!!  */
}

.main-logo,
.main-nav li {
    border-radius: 5px;
}

.main-logo {
    margin-top: 0;      /* logo is <h1> element which by default have a top and bottom margin */
    margin-bottom: 0;   /* not removed in normaliz.css so remove here. */
    margin-right: 50px;
    width: 120px;
}

.main-nav li {
    margin-top: 15px;
    margin-right: 10px;
}
/*  Remember display sttings on elements are not inherited so anchor elements are still  inline.
    This results in minimal size within their parent elements so only the text is clickable.    */
/*  SOLUTION: Apply block and padding to anchor elements.   */
.main-logo a, 
.main-nav a {
    color: white;
    text-decoration: none;
    display: block; /*  Because parent element is inline-block, the anchor elements do not force newlines btwn each anchor. */
    text-align: center;
    padding: 10px 20px;
}
/*  Takes care of whitespace... */
.main-footer {
    text-align: center;
    padding: 20px;
}


/*  Column Layout   */
.col {
    display: inline-block;
    padding: 20px;
    vertical-align: top;    /*  Added becuase inline-block defaults to bottom. Added to remove  */
    margin-right: -5px;     /*  whitespace problem which forced .sec..content to new line.  */
}
.primary-content {
    width: 60%;
}
.secondary-content {
    width: 40%;
}


/*  Media Queries   */
@media (max-width: 768px) {
    .main-logo,
    .main-nav,
    .main-nav li,
    .col {
        display: block;
        width: initial;
        height: initial;
        margin: initial;
    }
    .main-nav {
        padding-left: initial;
    }
    .main-nav li {
        margin-top: 15px;
    }
    .main-banner {
        display: none;
    }
    /*
    .primary-content,
    .secondary-content {
        width: 100%;
    }
    */
}

Answer 5 · 2015-04-07T17:59:18Z

April 7, 2015 5:59pm

What browser are you using? I copied your code and saved the html and css files to test it out and everything is working as it should for me.

Answer 6 · 2015-04-07T18:07:19Z

April 7, 2015 6:07pm

I was just comparing different browsers - it is working in Chrome 41.x, Firefox and Safari 5.x but not IE 11. Sorry, I thought I had checked that initially. It will not work in IE even when I reset the width to 100% in the media query. I also set the "col" class to be first in the <div> tags. No luck.

Answer 7 · 2015-04-07T18:13:44Z

April 7, 2015 6:13pm

That fixed it. Thank you for your time Colin.

Welcome to the Treehouse Community

Looking to learn something new?

Tom Berry

Tom Berry

Problem changing width of primary & secondary content to 100% for mobile device.

Colin Marshall

Colin Marshall

7 Answers

Colin Marshall

Colin Marshall

Liz Laffitte

Liz Laffitte

Liz Laffitte

Liz Laffitte

Tom Berry

Tom Berry

Colin Marshall

Colin Marshall

Colin Marshall

Colin Marshall

Tom Berry

Tom Berry

Tom Berry

Tom Berry

Colin Marshall

Colin Marshall