メディアを作成する方法css3

Question

私は@mediaを動作させたいCSSファイルを持っています。メディアは以下を実行する必要があります。 - モバイル版では、1つの情報列のみにする必要があります。 - タブレット版（500-1024）では2列になります - 1024-1240の幅では3列になります - 幅が1240を超える画面では4つの列が表示されます。

また、フッターを追加したいと思いますが、ページの上部に終わることがあります。

CSS

<!-- begin snippet: js hide: false console: true babel: false --> 

<!-- language: lang-css --> 

@charset "utf-8"; 
/*--playTime adobe colour--*/ 

body { 
    margin: 5px; 
    background-color: rgb(247, 168, 84); 
} 

/*-----978GS--------*/ 

.col { 
    margin-left: 25px; 
    margin-right: 17px; 
    margin-bottom: 20px; 
    margin-top: 3px; 

} 
.col-4 { 
    width: 305px; 
    float: left;  
} 
.col-6 { 
    width: 474px; 
} 

.col-12 { 
    width: 978px; 
} 
/*---end 978GS---*/ 

.img-responsive { 
    width: 100%; 
} 
.btn { 
    border: 1px solid white; 
    padding: 6px 10px; 
    border-radius: 5px; 
} 

.btn-buy{  
    background-color: rgb(87, 218, 247); 
    border-color: none; 
    font-family: 'Fjalla One', sans-serif; 
} 
.product-box{ 
    background-color: rgb(145, 210, 84); 
    padding: 5px; 
    box-sizing: content-box; 
} 
.product-box h3{ 
    color: peachpuff; 
    font-family: 'Fjalla One', sans-serif; 
    font-size: 1.5em; 
    margin-bottom: 0.5em; 
    text-align: center;  
} 
.product-box p{ 
    color: peachpuff; 
    font-family: 'Poppins', sans-serif; 
    margin-top: 3px;  
} 

#text-container-header{ 
    text-align: left bottom; 
} 

.clearfix { 
    clear: both; 
} 


/*--end main --*/ 

/*----*/ 

#mainPageBanner { 
    height: 200px; 
    background-color: ; 
    background-size: 1050px; 
    background-image: url(../Bilder/barcelona.jpg); 
    align-content: center; 
} 

/*--end mainbanner--*/ 

/*---Start banner-*/ 

#mainPageHeader { 
    height: 10em; 
    background-color: rgb(242, 73, 7); 
    text-align: left; 
    margin-bottom: 15px;  
} 

#logo{ 
    color: peachpuff; 
    text-decoration: none; 
    font-size: 3em; 
    font-family: 'Fjalla One', sans-serif; 
    display: inline-block; 
    margin-top: 0.1em; 
    margin-left: 0.10em; 
    text-align: ; 
} 

#mainPageNav{ 
    width: 978px; 
    margin: auto; 
    background-color: none; 
} 

#mainPageNav::after{ 
    content: ""; 
    display: block; 
    clear: both: 
} 

ul{ 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 

li{ 
    float: left; 
    width: 80px; 
    position: relative; 
} 

a{ 
    background-color: 
    color: rgb(255, 255, 0); 
    font-family: 'Fjalla One', sans-serif; 
    text-align: left; 
    padding-bottom: 10px; 
    padding-top: 10px; 
} 

/*--banner end--*/ 


/*--- Start Footer--*/ 

.mainPageFooter{ 
    text-align: center; 
    text-decoration-line: underline; 
} 

/*--- ends footer --*/ 

/*---Start media Queries---*/ 

@media screen (min-width: 500px) and (max-width: 2040) { 

    .col-4{ 
     width: 100%; 
    } 
} 

HTML

<header id="mainPageHeader" class="col"> 
    <a id="logo" href="#ng">Zen</a> 

    <nav id="mainPageNav" class="col-12"> 
    <ul> 
     <li><a href="#ng">Home</a></li> 
     <li><a href="#ng">Destinations</a></li> 
     <li><a href="#ng">Travel</a></li> 
     <li><a href="#ng">My Account</a></li> 
     <li><a href="#ng">Contact</a></li> 
    </ul> 
    </nav> 
    <!--end navi menu--> 
</header> 

<div id="mainPageBanner" class="col col-12"> 
    <div id="text-container-header"> 

    <p>Banner text</p> 
    </div> 
</div> 

<!--End banner--> 

<div id="mainContent"> 

    <article class="col col-4 col-8 product-box col-7"> 
    <div id="product-content-box"> 
     <h3>Las Vegas</h3> 
     <img class="img-responsive" src="Bilder/lasvegas.jpg" alt="Las vegas"> 
     <p>A quem concursionibus ubi excepteur te officia. Ab ita sempiternum. Quae ingeniis ita aute cillum, legam tempor hic proident. Minim admodum iis laborum. O aute appellat aut multos imitarentur arbitror lorem incurreret. Varias aut admodum de malis, 
     de doctrina cohaerescant.</p> 
     <input class="btn btn-order" type="button" value="Bestill"> 
    </div> 
    </article> 

    <article class="col col-4 col-8 product-box col-7"> 
    <div id="product-content-box"> 
     <h3>Kyoto</h3> 
     <img class="img-responsive" src="Bilder/kyoto.jpg" alt="Kyoto"> 
     <p>Commodo anim varias appellat illum se pariatur quorum quid in varias ad illum a aut quem laborum, malis nescius fidelissimae. Multos mentitum ne sint aute, est eu tractavissent. Doctrina quo commodo ea in labore si tamen. Se vidisse arbitrantur, 
     vidisse instituendarum ut deserunt, voluptate o quamquam ea et fugiat relinqueret. Ab ea velit consequat, tempor malis summis aut quid quo admodum ea vidisse se mandaremus nulla admodum officia. </p> 
     <input class="btn btn-order" type="button" value="Bestill"> 
    </div> 
    </article> 

    <article class="col col-4 col-8 product-box col-7"> 
    <div id="product-content-box"> 
     <h3>Tenerife</h3> 
     <img class="img-responsive" src="Bilder/tenerife.jpg" alt="Tenerife"> 
     <p>Ab legam ullamco commodo. Offendit culpa ipsum senserit labore et quid officia cernantur se magna probant ne arbitrantur quo irure singulis quo consequat. Proident lorem labore singulis ipsum, sed tamen concursionibus. O nescius ex aliquip aut duis 
     cernantur se lorem legam, magna litteris e voluptatibus, ad mentitum comprehenderit. Pariatur relinqueret quo cupidatat. Et duis sed lorem.</p> 
     <input class="btn btn-order" type="button" value="Bestill"> 
    </div> 
    </article> 

    <article class="col col-4 col-8 product-box col-7"> 
    <div id="product-content-box"> 
     <h3>Paris</h3> 
     <img class="img-responsive" src="Bilder/louvre.jpg" alt="Paris"> 
     <p>Laboris est quis, illum cernantur do praetermissum, quo ipsum cupidatat domesticarum si quamquam quorum varias ut esse ne do elit consequat efflorescere, hic si amet voluptate quo culpa est fabulas, incurreret sed quid commodo. Ubi lorem consequat 
     an</p> 
     <input class="btn btn-order" type="button" value="Bestill"> 
    </div> 
    </article> 

    <div class="clearfix"></div> 


    <article class="col col-4 col-8 product-box col-7"> 
    <div id="product-content-box"> 
     <h3>Barcelona</h3> 
     <img class="img-responsive" src="Bilder/barcelona.jpg" alt="Barcelona"> 
     <p>Ubi incurreret voluptatibus. Aut multos nulla ita pariatur et appellat amet aliqua consequat summis a cernantur eram aut aliquip eruditionem, vidisse noster ullamco incurreret. Expetendis dolore esse an tamen, an irure sempiternum. Ab a amet probant 
     ubi quibusdam qui laboris, e nam fidelissimae ne possumus eu irure. Iis a aute legam amet te labore mandaremus ne quem fugiat. Deserunt arbitrantur est vidisse iis senserit id esse ne id excepteur quo laboris, voluptate quae dolore sed esse. Aut 
     nulla elit velit tempor.</p> 
     <input class="btn btn-order" type="button" value="Bestill"> 
    </div> 
    </article> 

    <article class="col col-4 col-8 product-box col-7"> 
    <div id="product-content-box"> 
     <h3>London</h3> 
     <img class="img-responsive" src="Bilder/london.jpg" alt="London"> 
     <p>Consequat quem consequat ex quibusdam ut fore, sed laboris ab laboris se a legam laborum. Legam arbitror ita officia, qui eu sunt possumus. Vidisse praesentibus id laboris, illum non mentitum ab e quorum malis fugiat tempor, ut eram legam sed proident. 
     Esse exercitation possumus tamen fabulas. Ubi aliqua dolore illum singulis, eram an consequat ubi fore. Mandaremus multos cernantur cupidatat aut sed occaecat exercitation, quamquam familiaritatem an mentitum do doctrina do varias incididunt.</p> 
     <input class="btn btn-order" type="button" value="Bestill"> 
    </div> 
    </article> 

    <article class="col col-4 col-8 product-box col-7"> 
    <div id="product-content-box"> 
     <h3>Tokyo</h3> 
     <img class="img-responsive" src="Bilder/tokyo.jpg" alt="Tokyo"> 
     <p>Qui minim offendit. Quo velit proident adipisicing an culpa fabulas ex aliqua enim. Fugiat ne ita quid iudicem. Eram cernantur ad voluptate. Ingeniis non litteris. Velit offendit concursionibus, anim possumus offendit, irure sed te multos expetendis 
     ea o malis quamquam transferrem. Quae a appellat si aute.</p> 
     <input class="btn btn-order" type="button" value="Bestill"> 
    </div> 
    </article> 

    <article class="col col-4 col-8 product-box col-7"> 
    <div id="product-content-box"> 
     <h3>Oslo</h3> 
     <img class="img-responsive" src="Bilder/oslo.jpg" alt="Tokyo"> 
     <p>Ullamco quid veniam ad quis. Legam proident se singulis a voluptate quem in commodo voluptatibus. Varias expetendis despicationes. Eram iis e illum aliquip nam nam magna cillum irure tempor aut duis mentitum se velit nulla, appellat elit varias 
     probant velit. Ut noster duis o eiusmod. Fabulas fidelissimae iis commodo si mentitum cillum appellat iis probant concursionibus ita ullamco, nisi iudicem do dolor quem, arbitror eram possumus, ullamco summis pariatur, esse quibusdam relinqueret, 
     labore exquisitaque occaecat esse quamquam.</p> 
     <input class="btn btn-order" type="button" value="Bestill"> 
    </div> 
    </article> 

    <footer id="mainPageFooter"> 
    <p>----Zen----</p> 
    </footer> 

</div> 
</div> 
</div> 

Answer 1

それはあなたがあなたのメディアクエリでandが欠落していることが考えられます。

例えば @media画面と（最小幅：500pxなど）と（最大幅：2040）{

Answer 2

は、メディアクエリのこのLinkを見てください。

下

.mainPageFooter{ 
    text-align: center; 
    text-decoration-line: underline; 
    position: absolute; 
    bottom : 0; 
} 

Answer 3

に設定するためにあなたのフッターの最大幅のためのピクセルを追加し、確認している間とにある

@media screen (min-width: 500px) and (max-width: 2040px) { 

    body{ 
     display:none;  
    } 
}