Probleme bei meinen Media-Queries Positionierung für Hover Buttons

Question

Ich habe meine Programmierung für alle Smartphone Devices abgeschlossen und jetzt habe ich mit den Tablets angefangen, aber bald auf dieser Mission habe ich ein Problem, weil ich nicht sicher bin, wie ich das beheben kann. Diese

ist, wie mein „Section Skills“ sieht aus wie für mobile: My section on mobile

Auf Tablette mag ich 3 in jeder Zeile und nicht mehr als 2 aber ich bin nicht in der Lage, dies zu machen und weiß nicht, warum.

.Skills{ 
 
\t background-color:#262626; \t 
 
\t padding-bottom: 40px; 
 
} 
 

 

 
.Skills p:nth-child(1){ 
 
\t padding-top: 54px; 
 
\t padding-left: 50px; 
 
\t font-size:30px; 
 
\t font-weight:900; 
 
\t letter-spacing: 15px; 
 
\t color:#fff; 
 
} 
 

 
.Skills p:nth-child(2){ 
 
\t padding-top: 4px; 
 
\t padding-left: 50px; 
 
\t font-size:30px; 
 
\t font-weight:900; 
 
\t letter-spacing: 15px; 
 
\t color:#fff; 
 
} 
 

 
.Skills p:nth-child(3){ 
 
\t padding-top: 7px; 
 
\t padding-left: 50px; 
 
\t font-size:15px; 
 
\t font-weight:400; 
 
\t color:#fff; 
 
} 
 

 
.Skills img:nth-child(4){ 
 
\t padding-top: 7px; 
 
\t padding-left: 51px; 
 
} 
 

 
section { 
 
\t display:flex; 
 
\t flex-wrap: wrap; 
 
\t flex-direction:row; 
 
    \t justify-content: space-between; 
 
} 
 

 
.Programme { 
 
\t text-align:center; 
 
\t color:#ffffff; 
 
    padding: 20px 0 0 49px; 
 

 
} 
 

 
section .Programme:nth-child(2),section .Programme:nth-child(4),section .Programme:nth-child(6),section .Programme:nth-child(8) { 
 
    padding: 20px 49px 0 0; 
 
} 
 

 
.Programme img { 
 
\t -webkit-filter: grayscale(100%); 
 
    filter: grayscale(100%); 
 
\t transition: filter 1s ease; 
 
    transition : -webkit-filter 1000ms linear; 
 
    width: 102px; 
 
} 
 

 
.Programme img:hover { 
 
\t -webkit-filter: grayscale(0%); 
 
    filter: grayscale(0%); 
 
\t transition: filter 1s ease; 
 
    transition : -webkit-filter 1000ms linear 
 
} 
 

 
h3{ 
 
\t margin: 5px 0 0 0; 
 
    font-size: 14px; 
 
\t font-weight:700; 
 
} 
 

 
h4 { 
 
\t margin: 5px 0 0 0; 
 
    font-size: 12px; 
 
\t font-weight: 300; 
 
}

<article class="Skills"> 
 
     <p>MEINE</p> 
 
     <p>SKILLS</p> 
 
     <p>DAS IST MEIN KÖNNEN</p> 
 
     <img src="images/Strich_320.jpg" alt=""/> 
 

 
     <section> 
 

 
      <div class="Programme"> 
 
       <img src="images/Photoshop.png"/> 
 
       <h3>PHOTOSHOP</h3> 
 
       <h4>Experte, 5 Jahre</h4> 
 
      </div> 
 

 
      <div class="Programme"> 
 
       <img src="images/Illustrator.png"/> 
 
       <h3>ILLUSTRATOR</h3> 
 
       <h4>Experte, 5 Jahre</h4> 
 
      </div> 
 

 
      <div class="Programme"> 
 
       <img src="images/InDesign.png"/> 
 
       <h3>INDESIGN</h3> 
 
       <h4>Experte, 5 Jahre</h4> 
 
      </div> 
 

 
      <div class="Programme"> 
 
       <img src="images/Dreamweaver.png"/> 
 
       <h3>DREAMWEAVER</h3> 
 
       <h4>Experte, 5 Jahre</h4> 
 
      </div> 
 

 
      <div class="Programme"> 
 
       <img src="images/AfterEffects.png"/> 
 
       <h3>AFTEREFFECTS</h3> 
 
       <h4>Experte, 5 Jahre</h4> 
 
      </div> 
 

 
      <div class="Programme"> 
 
       <img src="images/PremierePro.png"/> 
 
       <h3>PREMIERE PRO</h3> 
 
       <h4>Experte, 5 Jahre</h4> 
 
      </div> 
 

 
      <div class="Programme"> 
 
       <img src="images/SonyVegas.png"/> 
 
       <h3>SONY VEGAS</h3> 
 
       <h4>Experte, 5 Jahre</h4> 
 
      </div> 
 

 
      <div class="Programme"> 
 
       <img src="images/Cinema4D.png"/> 
 
       <h3>CINEMA4D</h3> 
 
       <h4>Experte, 5 Jahre</h4> 
 
      </div> 
 
     </section> 
 
    </article>

Answer 1

Es ist schwer zu sagen, aber es klingt sehr nach einem der übergeordneten Container (entweder die section oder die article) zu eng ist und dass, sobald der horizontalen padding ist einkalkuliert, Die .programme divs sind zu breit, um 3 in einer Reihe zu passen.

Versuchen:

.programme { 
max-width: 20%; 
}