After completing the coding for all Smartphone devices, I moved on to working on Tablets. However, I encountered an issue during this process as I am unsure of how to fix it.
Here is a preview of my "Section Skills" layout for mobile: View Section on Mobile
For tablets, I aim to have 3 items in each row instead of 2, but I am unable to achieve this and not sure 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>MY</p>
<p>SKILLS</p>
<p>THIS IS WHAT I CAN DO</p>
<img src="images/Strich_320.jpg" alt=""/>
<section>
<div class="Programme">
<img src="images/Photoshop.png"/>
<h3>PHOTOSHOP</h3>
<h4>Expert, 5 Years</h4>
</div>
<div class="Programme">
<img src="images/Illustrator.png"/>
<h3>ILLUSTRATOR</h3>
<h4>Expert, 5 Years</h4>
</div>
<div class="Programme">
<img src="images/InDesign.png"/>
<h3>INDESIGN</h3>
<h4>Expert, 5 Years</h4>
</div>
<div class="Programme">
<img src="images/Dreamweaver.png"/>
<h3>DREAMWEAVER</h3>
<h4>Expert, 5 Years</h4>
</div>
<div class="Programme">
<img src="images/AfterEffects.png"/>
<h3>AFTEREFFECTS</h3>
<h4>Expert, 5 Years</h4>
</div>
<div class="Programme">
<img src="images/PremierePro.png"/>
<h3>PREMIERE PRO</h3>
<h4>Expert, 5 Years</h4>
</div>
<div class="Programme">
<img src="images/SonyVegas.png"/>
<h3>SONY VEGAS</h3>
<h4>Expert, 5 Years</h4>
</div>
<div class="Programme">
<img src="images/Cinema4D.png"/>
<h3>CINEMA4D</h3>
<h4>Expert, 5 Years</h4>
</div>
</section>
</article>