html - Problems on my Media-Queries Positioning for Hover Buttons -


i finished coding smartphone devices , started on tablets on mission have problem because im not sure how fix this.

this how "section skills" looks mobile: my section on mobile

on tablet want 3 in each row , not 2 im not able make , dont know why.

.skills{  	background-color:#262626;	  	padding-bottom: 40px;  }      .skills p:nth-child(1){  	padding-top: 54px;  	padding-left: 50px;  	font-size:30px;  	font-weight:900;  	letter-spacing: 15px;  	color:#fff;  }    .skills p:nth-child(2){  	padding-top: 4px;  	padding-left: 50px;  	font-size:30px;  	font-weight:900;  	letter-spacing: 15px;  	color:#fff;  }    .skills p:nth-child(3){  	padding-top: 7px;  	padding-left: 50px;  	font-size:15px;  	font-weight:400;  	color:#fff;  }    .skills img:nth-child(4){  	padding-top: 7px;  	padding-left: 51px;  }    section {  	display:flex;  	flex-wrap: wrap;  	flex-direction:row;   	justify-content: space-between;  }    .programme {  	text-align:center;  	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 {  	-webkit-filter: grayscale(100%);      filter: grayscale(100%);  	transition: filter 1s ease;      transition : -webkit-filter 1000ms linear;      width: 102px;  }    .programme img:hover {  	-webkit-filter: grayscale(0%);      filter: grayscale(0%);  	transition: filter 1s ease;      transition : -webkit-filter 1000ms linear  }    h3{  	margin: 5px 0 0 0;      font-size: 14px;  	font-weight:700;  }    h4 {  	margin: 5px 0 0 0;      font-size: 12px;  	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>

it's difficult tell, sounds 1 of parent containers (either section or article) narrow , once horizontal padding factored in, .programme divs wide fit 3 in row.

try:

.programme { max-width: 20%; } 

Comments

Popular posts from this blog

Spring Boot + JPA + Hibernate: Unable to locate persister -

go - Golang: panic: runtime error: invalid memory address or nil pointer dereference using bufio.Scanner -

c - double free or corruption (fasttop) -