CODEWITHSUNDEEP
htmlcss
Vinc
Vinc

Reputation: 23

How to display different image style on mobile devices

Hi can anyone tell me how to display different images style in mobile devices? When I'm on PC I want my pictures to be clip-pathed, but on mobile want them without this effect. Here is my code.

.images {
  margin-top: 50px;
}

.img1{
  clip-path: polygon(0 0, 80% 0, 100% 100%, 0% 100%);
  -webkit-transition: width 1s;
  transition: width 1s;
}

.img2{
  clip-path: polygon(0 0, 80% 0, 100% 100%, 20% 100%);
  margin-left: -111px;
  -webkit-transition: width 1s;
  transition: width 1s;
}

.img3{
  clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
  margin-left: -111px;
  -webkit-transition: width 1s;
  transition: width 1s;
}
<div class="images wow fadeInLeft">
        <img class="img1" src="http://channeldrive.in/wp-content/uploads/2017/04/Zyxel_logo-534x173.png" alt="">
        <img class="img2" src="http://channeldrive.in/wp-content/uploads/2017/04/Zyxel_logo-534x173.png" alt="">
        <img class="img3" src="http://channeldrive.in/wp-content/uploads/2017/04/Zyxel_logo-534x173.png" alt="">
    </div>

Upvotes: 1

Views: 330

Answers (1)

Tibix
Tibix

Reputation: 390

For this Situation you will need to use Media Queries. If you never heard of it, check it out here.

Inside of a Media Query you can style your Elements just like you are used to in CSS. The only difference is, the Rules are only applied if the condition is true.

For example:

@media(max-width: 768px){
  .myClass{
    color: blue;
  }
}

In this Case .myClass will only get the Blue Color if your Screen-Width is smaller then 768px.

I also added Border Colors to the Pen which will change with the Clip-Path so its easier to realize when the change happens.

Working Pen: https://codepen.io/Tibixx/pen/WzZyKp

Upvotes: 1

Related Questions