使用CSS媒体查询来更改页面布局

Question

I asked a question about this same project earlier, but this is a different issue that I'm having.

I am supposed to use three different media queries to change the page layout based on the screen size that is used to view it (I am testing this by adjusting my browser window). The three queries are to work as follows:

Screen Size <400:
Background 1
Bulleted lists should be vertical.
Bulleted lists should be below the two columns.
The Road to Enlightenment section should be on top of the Make it Good section.

Screen Size >=400 and <500:
Background 2
Bulleted lists should be horizontal.
Bulleted lists should be to the right of the two columns.
The Road to Enlightenment sections should be to the left of the Make it Good section.

Screen Size <500:
Same basic concept as the previous query, but with background 3.

Everything is working fine except getting the columns to appear side-by side as soon as the size goes to 400. What I mean is that when I drag the window over, the background changes correctly, and everything, but the columns don't appear side-by-side until the screen is about half-way from it's narrowest point and being maximized (I really hope that makes sense).

Here is my CSS:

@media (max-width: 399px) {
body {
background-color: purple;
border: 10px double black;
padding: 1%;
}
h1,h2 {
text-align: center;
background-color: purple;
color: white;
border: 10px double white;
}
#zen-summary {
text-align: center;
background-color: red;
color: white;
border: 10px double white;
}
#start-id {
background-image: url("sfalogo2.jpg");
background-repeat: no-repeat;
background-position: center;
color: black;
width: auto;
border: 10px double white;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
#good-id {
background-image: url("scaled_sfalogo2.jpg");
background-repeat: no-repeat;
background-position: center;
color: black;
width: auto;
border: 10px double white;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
h3.occasion {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#design-selection {
list-style-position: inside;
text-align: center;
background-color: white;
border: 10px double red;
clear: both;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
h3.animals {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#zen-resources {
list-style-position: inside;
text-align: center;
background-color: white;
color: purple;
border: 10px double red;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
}

@media (max-width: 499px) and (min-width: 400px) {
body {
background-color: white;
border: 10px double black;
padding: 1%;
}
h1,h2 {
text-align: center;
background-color: purple;
color: white;
border: 10px double white;
}
#zen-summary {
text-align: center;
background-color: red;
color: white;
border: 10px double white;
}
#start-id {
background-image: url("sfalogo3.jpg");
width: auto;
text-align: center;
border: 10px double purple;
display: block;
float: left;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
padding: 1.5%;
width: auto;
}
#good-id {
color: black;
text-align: center;
border: 10px double purple;
display: block;
float: left;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
padding: 1.5%;
width: auto;
background-image: url("sfalogo3.jpg");
background-repeat: no-repeat;
background-position: center;
}
h3.occasion {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#design-selection {
list-style-position: inside;
text-align: center;
background-color: white;
border: 10px double red;
clear: both;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline;
}
h3.animals {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#zen-resources {
list-style-position: inside;
text-align: center;
background-color: white;
color: purple;
border: 10px double red;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
}
}

@media (min-width: 500px) {
body {
background-image: url("sfa_logo1.jpg");
color: black;
}
h1,h2 {
text-align: center;
background-color: purple;
color: white;
border: 10px double white;
}
#zen-summary {
text-align: center;
background-color: red;
color: white;
border: 10px double white;
}
#start-id {
background-color: white;
color: purple;
text-align: center;
border: 10px double purple;
display: block;
float: left;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
width: 400px;
padding: 1.5%;
}
#good-id {
background-color: white;
color: purple;
text-align: center;
border: 10px double purple;
display: block;
float: left;
margin-left: 1.5%;
margin-right: 1.5%;
margin-top: 1.5%;
margin-bottom: 1.5%;
width: 400px;
padding: 0.5%;
}
h3.occasion {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#design-selection {
list-style-position: inside;
text-align: center;
background-color: white;
border: 10px double red;
float: right;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
ul li {
display: inline;
}
h3.animals {
background-color: red;
color: white;
text-align: center;
border: 10px double white;
}
#zen-resources {
list-style-position: inside;
text-align: center;
background-color: white;
color: purple;
border: 10px double red;
float: right;
}
}

And here is my html, although the instructions of this project do not actually let me change the html at all, I can only work with the CSS.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>CS 351 - Project 1</title>

    <link rel="stylesheet" href="style.css">




</head>



<body id="css-zen-garden">


    <section class="intro-start" id="start-intro-id">
        <header role="bannerRocks">
            <h1>CS 351 Rocks</h1>
            <h2>351 is a really great thing!</h2>
        </header>

        <div class="summaryDivision" id="zen-summary" role="article">
            <p>There are many ways that it is great.<a href="/examples/style.css" title="This page's sample CSS, the file you may modify."></a></p>
        </div>

        <div class="start" id="start-id" role="article">
            <h3>The Road to Enlightenment</h3>
            <p>To be, or not to be: that is the question". - (Act                            III, Scene I).</p>
            <p>"Neither a borrower nor a lender be; For loan oft loses                            both itself and friend, and borrowing dulls the edge                            of husbandry". - (Act I, Scene III).</p>
            <p>"This above all: to thine own self be true". - (Act                            I, Scene III).</p>
            <p>"Though this be madness, yet there is method in 't.".                            - (Act II, Scene II). </p>
            <p>"That it should come to this!". - (Act I, Scene II). </p>
            <p>"There is nothing either good or bad, but thinking                            makes it so". - (Act II, Scene II). </p>
            <p>"What a piece of work is man! how noble in reason!                            how infinite in faculty! in form and moving how express                            and admirable! in action how like an angel! in apprehension                            how like a god! the beauty of the world, the paragon                            of animals! ". - (Act II, Scene II).</p>
            <p>"The lady doth protest too much, methinks". - (Act                            III, Scene II). </p>
            <p>"In my mind's eye". - (Act I, Scene II).</p>
            <p>"A little more than kin, and less than kind". - (Act                            I, Scene II).</p>
            <p>"The play 's the thing wherein I'll catch the conscience                            of the king". - (Act II, Scene II). </p>
            <p>"And it must follow, as the night the day, thou canst                            not then be false to any man". - (Act I, Scene III)."This                            is the very ecstasy of love". - (Act II, Scene I).</p>
            <p>"Brevity is the soul of wit". - (Act II, Scene II).</p>
            <p>"Doubt that the sun doth move, doubt truth to be a                            liar, but never doubt I love". - (Act II, Scene II).</p>
            <p>"Rich gifts wax poor when givers prove unkind". - (Act                            III, Scene I).</p>
            <p>"Do you think I am easier to be played on than a pipe?"                            - (Act III, Scene II).</p>
            <p>"I will speak daggers to her, but use none". - (Act                            III, Scene II).</p>
            <p>"When sorrows come, they come not single spies, but                            in battalions". - (Act IV, Scene V).</p>
        </div>
    </section>

    <div class="bad inbetween" id="good-supporting" role="main">
        <div class="good" id="good-id" role="article">
            <h3>Make it good.</h3>
            <p>"Now is the winter of our discontent". - (Act I, Scene                            I). </p>
            <p>"A horse! a horse! my kingdom for a horse!". - (Act                            V, Scene IV). </p>
            <p>"Conscience is but a word that cowards use, devised                            at first to keep the strong in awe". - (Act V, Scene                            III).</p>
            <p>"So wise so young, they say, do never live long". -                            (Act III, Scene I). </p>
            <p>"Off with his head!" - (Act III, Scene IV). </p>
            <p>"An honest tale speeds best, being plainly told". -                            (Act IV, Scene IV). </p>
            <p>"The king's name is a tower of strength". - (Act V,                            Scene III). </p>
            <p>"The world is grown so bad, that wrens make prey where                            eagles dare not perch". - (Act I, Scene III).</p>
        </div>






    <aside class="sidebar" role="complementary">
        <div class="wrapper">

            <div class="design-selection" id="design-selection">
                <h3 class="occasion">On the occasion...:</h3>
                <nav role="navigation">
                    <ul>
                    <li>
                      <a href="http://cnn.com" class="design-name">Caesar</a></li>
                    <li><a href="http://sfasu.edu">SFA</a></li>
                    <li><a href="http://cosm.sfasu.edu">COSM</a>
                      </li>
                    </ul>
                </nav>
            </div>

            <div class="zen-resources" id="zen-resources">
                <h3 class="animals">Resources:</h3>
                <ul>
                    <li class="view-css">
                    Cats</li>
                  <li class="view-css">Dogs</li>
                  <li class="view-css">Elephants</li>
                    <li class="view-css">Rhinos<a href="http://www.mezzoblue.com/zengarden/translations/" title="View translated versions of this page."></a>
                  </li>
                </ul>
            </div>
        </div>
    </aside>


</div>

<!--

    These superfluous divs/spans were originally provided as catch-alls to add extra imagery.
    These days we have full ::before and ::after support, favour using those instead.
    These only remain for historical design compatibility. They might go away one day.

-->
<div class="extra1" role="presentation"></div><div class="extra2" role="presentation"></div><div class="extra3" role="presentation"></div>
<div class="extra4" role="presentation"></div><div class="extra5" role="presentation"></div><div class="extra6" role="presentation"></div>

</body>
</html>

Like I said, everything else is working fine, just that one issue. Any suggestions are greatly appreciated.

Answer 1

You could perhaps use the column-count and column-gap css properties to maintain appropriate columns for content under each media query.

.div {
  column-count: 3;
  column-gap: 10px;
}

this would put whatever is in the class .div into 3 columns, with 10px gap in between each.