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
Post a Comment