Ich kann die Breite eines Div in CSS nicht ändern ...?

Ich habe ein Problem mit http://www.totalpartsdepot.com/tuotteet.html
ich gerade hinzugefügt Haltepunkte auf der Website, und ich habe Probleme bekam mit
„@media nur Bildschirm und (max-width: 768px)“

Könnte jemand gehen Sie bitte auf die Website und überprüfen Sie den Quellcode?
"klar: beide;" bewirkt, dass die Produkte in einer "Reihe" stehen, so wie ich es möchte.

Das Problem ist, dass ich nicht in der Lage bin, die Breite von ".index-post" zu ändern ... Ich verstehe nicht, was ich falsch gemacht habe, aber es wird einfach nicht breiter ... Ich möchte, dass das div ungefähr 90% der Breite des Abschnitts wird. Kann es etwas damit zu tun haben, dass die divs von -Tags umgeben sind und dass sie in li "-Tags sind (ich habe keine Ahnung, warum ich diese" li "-Tags dort hingelegt habe), aber es war die erste Website, die ich je gesehen habe gemacht und ich machte es in einer Woche, also wusste ich damals nicht viel, vor einem halben Jahr).Ich kann die Breite eines Div in CSS nicht ändern ...?

<!-- Simplified version of the website (http://www.totalpartsdepot.com/tuotteet.html) --> 
<!DOCTYPE html> 
<html lang="fi"> 
    <head> 
     <meta charset="utf-8"/> 
     <title>Tuotteet - Total Parts Depot</title> 
     <meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" /> 
     <meta name="theme-color" content="#d4610e"> 
     <link rel="stylesheet" href="style4.css" type="text/css"> 
    </head> 
    <body> 
<meta name="viewport" content="width=device-width, initial-scale=1"> 
     <div class="wrapper"> 
    <section> 
      <h4>Tuotteet</h4> 
      <h5>Kaikki hinnat sisältävät alv (24%)<br> 
      Tilaukset ja tiedustelut sähköpostitse: [email protected]</h5> 

         <li><a href="210K012A.html"><div class="index-post"> 
        <img src="http://www.totalpartsdepot.com/kuvat/thumbnails/thumb-210K012.jpg" alt=""> 
        <h1>Sytytys&shy;järjestelmä 60W valo&shy;puolalla</h1> 
           <h2>Kierrosluku&shy;mittarin johdolla.</h2> 
           <h3>Puch ajoviima&shy;jäähdytteiset moottorit: Esim. <wbr>Tunturi Super Sport, <wbr>Trial <wbr>& Tiger S<br> 
           + 2-vaihteiset Sachs-moottorit.</h3> 
        <h4>Tuotenumero: 210K012A</h4> 
        <h5>Hinta: 229€</h5> 
       </div></a></li> 
    <li><a href="inertialevy.html"><div class="index-post"> 
       <img src="kuvat/thumbnails/thumb-inertialevy.jpg" alt=""> 
       <h1>Inertialevy</h1> 
       <h2>Paino: 280 grammaa.</h2> 
       <h3>Yhteensopiva 210K... -sarjojen kanssa.</h3> 
       <h4>Tuotenumero: 210V257</h4> 
       <h5>Hinta: 33€</h5> 
      </div></a></li> 

       <li><a href="210V261.html"><div class="index-post"> 
       <img src="kuvat/thumbnails/thumb-regulaattori.jpg" alt=""> 
       <h1>Regulaattori 12V</h1> 
       <h2></h2> 
       <h3></h3> 
       <h4>Tuotenumero: 210V261</h4> 
       <h5>Hinta: 39€</h5> 
      </div></a></li> 

     </section> 
     </div> 
    </body> 
</html>

body { 
    background-image: url(http://www.totalpartsdepot.com/kuvat/harjattualumiini.jpg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    background-color: #4a4a4a; 
} 
@font-face { 
font-family: 'Streetwear'; 
src: url(http://www.totalpartsdepot.com/fontit/Streetwear.ttf); 
} 

@font-face { 
font-family: 'StreetwearIE'; 
src: url(http://www.totalpartsdepot.com/fontit/Streetwear.eot); 
} 
#wrapper { 
    width: 98%; 
    min-height: 100%; 
    max-width: 920px; 
    background:#4a4a4a; 
    margin: auto; 
    padding: 5%; 
    text-decoration: none; 
    font-family: Streetwear, StreetwearIE, arial, sans-serif; 
    float: left; 
    } 
    section { 
    float: left; 
    padding: 2%; 
    background: #d4610e; 
    width: 90%; 
    margin: 5vh 2% 2vh 2%; 
    border: 4px solid #FFFFFF; 
    border-radius: 10px; 
    list-style: none; 
} 
section h4 { 
    float: top; 
    font-size: 30px; 
    color: #000000; 
    width:58vw; 
    margin-bottom: none; 
} 
section h5 { 
    margin-top: none; 
    color: #000000; 
    font-family: Arial, sans-serif; 
    font-weight: 800; 
    font-size: 20px; 
    margin-bottom: 2vh; 

} 
.index-post { 
    display: list-item; 
    list-style: none; 
    float: left; 
    width: 28%; 
    height: 40vw; 
    border: 1px solid #FFFFFF; 
    border-radius: 10px; 
    margin: 1%; 
    padding: 1vh 1vw; 
    background-image: url(http://www.totalpartsdepot.com/kuvat/harjattualumiini.jpg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
    background-color: #4a4a4a; 
    box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.4), 0 3px 1px rgba(0, 0, 0, 0.2); 
} 
.index-post:hover { 
    box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.4); 
    -webkit-filter: brightness(0.5); 
    filter: brightness(0.5); 
} 
.index-post img{ 
    height: auto; 
    margin: 5%; 
    width: 90%; 
    display: block; 
} 
.index-post h1{ 
    font-family: Arial, sans-serif; 
    font-size: 2vw; 
    font-weight: 900; 
    margin-bottom: 0.5vh; 
    color: #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    height: 15%; 
    width: 100%; 
} 
.index-post h2{ 
    font-family: Arial, sans-serif; 
    font-size: 1.5vw; 
    font-weight: 500; 
    margin-bottom: 0.5vh; 
    color: #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    height: 5%; 
    width: 100%; 
} 
.index-post h3{ 
    font-family: Arial, sans-serif; 
    font-size: 1.5vw; 
    font-weight: 500; 
    margin-bottom: 0.5vh; 
    color: #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    height: 20%; 
    width: 100%; 
} 
.index-post h4{ 
    font-family: Arial, sans-serif; 
    font-size: 1.5vw; 
    font-weight: 500; 
    margin-bottom: 0.5vh; 
    color: #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    height: 5%; 
    width: 100%; 
} 
.index-post h5{ 
    font-family: Arial, sans-serif; 
    font-size: 1.5vw; 
    font-weight: 500; 
    margin-bottom: 0.5vh; 
    color: #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    height: 5%; 
    width: 100%; 
} 


@media only screen and (max-width: 768px) { 
section { 
    width: 90%; 
    margin: 2vh 5% 2vh 2%; 
    padding: 2%; 
} 
section h4 { 
    float: top; 
    font-size: 30px; 
    color: #000000; 
    width:58vw; 
    margin-bottom: none; 
} 
section h5 { 
    margin-top: none; 
    color: #000000; 
    font-family: Arial, sans-serif; 
    font-weight: 800; 
    font-size: 20px; 
    margin-bottom: 2vh; 
} 
section a { 
    width: 90% 
    margin: 2vh 5%; 
    display: block; 
} 
.index-post { 
    list-style: none; 
    clear: both; 
    width: 80%; 
    height: 70vw; 
    margin: 5% 1%; 
    padding: 1vh 1vw; 
} 
.index-post img{ 
    height: auto; 
    margin: 0 5% 2% 0 5%; 
    width: 90%; 
    display: block; 
} 
.index-post h1{ 
    font-family: Arial, sans-serif; 
    font-size: 25px; 
    font-weight: 900; 
    margin-bottom: 1%; 
    color: #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    height: 20%; 
    width: 100%; 
} 
.index-post h2{ 
    font-family: Arial, sans-serif; 
    font-size: 20px; 
    font-weight: 500; 
    margin-bottom: 1%; 
    color: #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    height: 10%; 
    width: 100%; 
} 
.index-post h3{ 
    font-family: Arial, sans-serif; 
    font-size: 20px; 
    font-weight: 500; 
    margin-bottom: 1%; 
    color: #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    height: 25%; 
    width: 100%; 
} 
.index-post h4{ 
    font-family: Arial, sans-serif; 
    font-size: 20px; 
    font-weight: 500; 
    margin-bottom: 1%; 
    color: #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    height: 10%; 
    width: 100%; 
} 
.index-post h5{ 
    font-family: Arial, sans-serif; 
    font-size: 20px; 
    font-weight: 500; 
    margin-bottom: 1%; 
    color: #FFFFFF; 
    border-bottom: 1px solid #FFFFFF; 
    height: 10%; 
    width: 100%; 
    } 
}

Quelle

2017-04-16 Kalle Hiltunen

Versuchen Sie, diese

In folgenden Code Linie 291

.index-post { 
list-style: none; 
clear: both; 
width: 90% !important; /*this*/ 
height: 70vw; 
margin: 5% 1%; 
padding: 1vh 1vw; 
}

Nur schnelle Tipps:

Sie nicht Höhe in kleinen Gerät zum Index-post machen in Höhe auto geben sollte, als Höhe nach Inhalt
Ihr Markup ist falsch li sollte nicht ohne ul

Quelle

2017-04-17 06:15:19

Danke für die Antwort! Es war ein Teil der Lösung und ich fand es heraus. Zunächst einmal, die Tags, die das div war innerhalb, tat nicht aus irgendeinem Grund automatisch weiter ... Ich fügte dem css;

Abschnitt a { \t Breite: 99%; \t min-Höhe: 60vh; \t höhe: auto! Wichtig; \t Anzeige: Block; \t Überlauf: versteckt; } –

Ich kann die Breite eines Div in CSS nicht ändern ...?

Antwort

Verwandte Themen