Dev - HTML & CSS

HTML & CSS Codes and Snippets

Media query for all width's

@media screen and (min-width: 1441px) {}
@media screen and (min-width: 1201px) and (max-width: 1440px) {}
@media screen and (min-width: 992px) and (max-width: 1200px) {}
@media screen and (min-width: 768px) and (max-width: 991px) {}
@media screen and (min-width: 577px) and (max-width: 767px) {}
@media screen and (min-width: 320px) and (max-width: 576px) {}
Media query for Specific device width's

@media screen and (min-width: 5501px) and (max-width: 6100px) { #Television}
@media screen and (min-width: 5001px) and (max-width: 5500px) { #Apple Desktop 27'inches}
@media screen and (min-width: 4000px) and (max-width: 4500px) { #Apple Desktop 21.5'inches}
@media screen and (min-width: 2101px) and (max-width: 2399px) { #Large Sized Desktop's}
@media screen and (min-width: 1801px) and (max-width: 2100px) { #Large Sized Desktop's 1920 * 1080}
@media screen and (min-width: 1441px) and (max-width: 1800px) { #Large Sized Desktop's}
Hide the scrollbar in website

body::-webkit-scrollbar {
display: none;
}
Floating Whatsapp Icon

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<a href="https://api.whatsapp.com/send?phone=51955081075&text=Hello" class="float" target="_blank">
<i class="fa fa-whatsapp my-float"></i>


.float{
position:fixed;
width:60px;
height:60px;
bottom:40px;
right:40px;
background-color:#25d366;
color:#FFF;
border-radius:50px;
text-align:center;
font-size:30px;
box-shadow: 2px 2px 3px #999;
z-index:100;
}
Image with tint

background:linear-gradient(to right,rgba(0,130,170,0),rgba(0,130,170,1)), url("images/name.jpg") !important ;
NOTE: Modify the Opacity value according to the requirement

Ⓒ Repository by Code Honchos