Media Queries in HTML/CSS

Ich habe einige Medienabfragen in meinen Code & verwenden cols implementieren.Media Queries in HTML/CSS

Ich habe es geschafft, das meiste davon zu beheben, aber wenn es um meine Tablet-Lösung geht, kann ich nicht herausfinden, was zu tun ist.

Die Sache ist, die Col-4 & Col-8 soll für Tablet sein, und in der Produkt-Box soll das Bild auf der rechten Seite sein, und der Text auf der linken Seite (alle in der Box) .

Dies ist mein HTML-Code zuerst und dann CSS-Boden.

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <meta http-equiv="X-UA-Compatible" content="IE=edge"> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <title>ZENFERIER.NO</title> 
    <link rel="stylesheet" type="text/css" href="css/meyersReset.css"> 
    <link rel="stylesheet" type="text/css" href="css/style.css"> 
    <link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Slab" rel="stylesheet">  
</head> 

<body> 

    <div id="container"> 

     <!-- Header område, inkluderer header, banner og nav --> 
     <header id="mainPageHeader"> <a id="logo" href="#ng">Zenferier.no</a> 
      <ul> 
       <li> <a href="#ng">Hjem</a> </li> 
       <li> <a href="#ng">Om Oss</a> </li> 
       <li> <a href="#ng">Reisetips</a> </li> 
       <li> <a href="#ng">Kontakt Oss</a> </li> 
      </ul> 

      <div id="mainPageBanner" class="img-responsive"> 
       <div id="tekstBanner">Book din ferie hos oss!</div> 
      </div> 
     </header> 
     <!-- slutt header område --> 

     <!-- hovedområde med produktbokser --> 
     <main id="mainContent"> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/tenerife.jpg" alt="Bilde Tenerife" class="img-responsive"> </div> 
        <div class="product-content-box"> 
        <h2>Tenerife</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/kyoto.jpg" alt="Bilde Kyoto" class="img-responsive"> </div> 
       <div class="product-content-box"> 
        <h2>Kyoto</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/barcelona.jpg" alt="Bilde Barcelona" class="img-responsive"> </div> 
       <div class="product-content-box"> 
        <h2>Barcelona</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/lasvegas.jpg" alt="Bilde Las Vegas" class="img-responsive"> </div> 
       <div class="product-content-box"> 
        <h2>Las Vegas</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/london.jpg" alt="Bilde London" class="img-responsive"> </div> 
       <div class="product-content-box"> 
        <h2>London</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/tokyo.jpg" alt="Bilde Tokyo" class="img-responsive"> </div> 
       <div class="product-content-box"> 
        <h2>Tokyo</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/paris.jpg" alt="Bilde Paris" class="img-responsive"> </div> 
       <div class="product-content-box"> 
        <h2>Paris</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/berlin.jpg" alt="Bilde Berlin" class="img-responsive"> </div> 
       <div class="product-content-box"> 
        <h2>Berlin</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

      <article class="product-box col-screen1-4 col-screen1-5 col-tablet-4 col-tablet-8"> 
       <div class="product-content-box"> <img src="img/oslo.jpg" alt="Bilde Oslo" class="img-responsive"></div> 
       <div class="product-content-box"> 
        <h2>Oslo</h2> 
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quam quidem enim accusamus necessitatibus placeat repellendus iusto, ex doloremque culpa libero architecto neque recusandae quaerat dicta sit amet. Maiores, officia, excepturi.</p> 
       </div> 
      </article> 

     </main> 
     <!-- slutt hovedområde --> 

    </div> 
</body> 

</html>

CSS:

@charset "utf-8"; 
body { 
    margin: 0; 
} 

#container { 
    max-width: 80%; 
    min-height: 100%; 
    margin: auto; 
} 


/*-- mainPageHeader --*/ 

#mainPageHeader { 
    background-color: #797067; 
    max-width: 100%; 
} 

#logo { 
    color: #FFFDF6; 
    text-decoration: none; 
    font-size: 2em; 
    font-family: 'Roboto Slab', serif; 
    display: inline-block; 
    padding-top: 0.25em; 
    padding-bottom: 0.25em; 
} 


/*-- end mainPageHeader --*/ 


/*-- mainPageNav --*/ 

ul { 
    list-style-type: none; 
    margin: 0; 
    padding: 0; 
    overflow: hidden; 
    background-color: #4D8FAB; 
} 

li { 
    float: left; 
} 

li a { 
    display: block; 
    color: #FFFDF6; 
    text-align: center; 
    padding: 14px 16px; 
    text-decoration: none; 
} 

li a:hover { 
    background-color: #C4B197; 
} 


/*-- mainPageBanner --*/ 

#mainPageBanner { 
    height: 250px; 
    background-color: #4D8FAB; 
    /*blå*/ 
    background-image: url(../img/banner1.jpg); 
    background-size: 100%; 
    background-position: 0px 0px; 
    display: none; 
} 


/*-- end mainPageBanner --*/ 


/*-- tekst på banner --*/ 

#tekstBanner { 
    font-size: 2em; 
    font-family: 'Roboto Slab', serif; 
    background-color: #EBDBAE; 
    color: #4D8FAB; 
    width: 35%; 
    height: 30%; 
    padding: 10px; 
    padding-bottom: 0px; 
    margin-left: 50px; 
    margin-top: 90px; 
    display: inline-block; 
} 


/*-- mainPageFooter --*/ 

#mainPageFooter { 
    background-color: #797067; 
    bottom: 0; 
    height: 30px; 
    padding: 20px; 
} 


/*-- diverse kode --*/ 

.img-responsive { 
    width: 100%; 
} 

.product-box { 
    margin-left: 0.25em; 
    margin-right: 0.25em; 
} 

#mainContent { 
    margin-top: 10px; 
} 

h1 { 
    font-family: 'Roboto Slab', serif; 
    font-size: 30px; 
} 

h2 { 
    font-family: 'Roboto Slab', serif; 
    font-size: 25px; 
    color: black; 
} 

p { 
    font-family: 'Roboto', sans-serif; 
} 


/*-- media query tablet --*/ 

@media screen and (min-width:768px){ 
    .product-box { 
     margin: 0; 
     margin-bottom: 30px; 
    } 
    .product-content-box { 
     background-color: #C4B197; 
     margin-left: 10px; 
     margin-right: 10px; 
     padding: 15px; 
    } 
    .col-tablet-4 { 
     width: 33,33; 
     float: left; 
    } 

    .col-tablet-8 { 
     width: 66,66%; 
     float: left; 
    } 
} 
/*-- end media query tablet --*/ 


/*-- media query screen 1024++ --*/ 

@media screen and (min-width:1024px){ 
    .col-screen1-4 { 
     width: 33.33%; 
    } 
    #mainPageBanner { 
     display: block; 
    } 
} 

@media screen and (min-width:1240px){ 
    .col-screen1-5 { 
     width: 25%; 
    } 
    #mainPageBanner { 
     display: block; 
    } 
} 


/*-- end media query screen 1024++ --*/

Quelle

2016-12-14 Rana Baghdar

Versuchen Sie, die Reihenfolge der Anfragen Medien umzukehren. Lege das Tablet unter den Bildschirm. Es kann sein, es zu übersteuern. Ich hoffe das hilft. :-).

Quelle

2016-12-14 17:54:50

Danke für den Tipp, aber es hat nicht funktioniert. Ich kann es immer noch nicht schaffen, die Tablet-Produkte-Boxen nebeneinander zu machen: Quadrat 1: img - Text Quadrat 2: Text img Quadrat 3: Text - img Quadrat 4: img Text –

Ich glaube, Sie die . als Dezimaltrennzeichen in CSS verwenden müssen - für den ersten Medien Abfrage, können Sie die Breite für .col-tablet-4 und .col-tablet-8 mit einem Komma festgelegt haben , als Dezimaltrennzeichen. Sie haben auch die % auf der Breite .col-tablet-4 weggelassen. {}

@media Bildschirm und (max-width:

Quelle

2016-12-14 17:57:11

danke für die. Spitze! Ich habe es gerade bemerkt, ich habe auch% hinzugefügt, aber sie haben nichts verändert –

den Medien query

@media Bildschirm und (768. min-Breite): 768. ersetzen) {}

Quelle

2016-12-15 10:53:01 Narendra

Media Queries in HTML/CSS

Antwort

Verwandte Themen