Background image and providing padding to it

I have a select input and i want to put small image icon at the right of it with some padding on it. For this the easy solution is

My input

 <select placeholder="Filter By" class="searchuser userddl">
                    <option>Filter By</option>
                    <option>Recently Updated</option>
                    <option>Recently Deleted</option>
                </select>

And the css to give background image along with some padding is:


select.searchuser.userddl {
    background: #000 url('/images/down-arrow.png');
    background-position: right 7px top 6px;
    background-repeat: no-repeat;
}

And the output appears as

Implement Font Awesome icon inside submit button

If you want to place font awesome icon inside a submit button, first of all you cannot use

 <input type="submit" value="Submit">

but instead, you need to use as shown below:

  <button type="submit" class="btn btn-danger">
                <i class="fa fa-search" aria-hidden="true"></i>
 </button>

List of mostly used media queries

Last time we had discussed most appropriate and easy media queries for your site.I feel those media query itself is enough to make your site responsive. But If you want more detailed media queries that fit almost all varieties of mobiles, desktops, iPads, tablets, and laptops, you can use following media queries.

/* Smartphones (portrait and landscape) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
/* Styles */
}
/* iPads (portrait and landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
/* Styles */
}
/* iPads (landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) {
/* Styles */
}
/* Desktops and laptops */
@media only screen and (min-width : 1224px) {
/* Styles */
}
/* Large screens */
@media only screen and (min-width : 1824px) {
/* Styles */
}
/* iPhone 4. Comma can be used to apply same rules to multiple media queries. */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}
/*iPhone 6 Portrait*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : portrait) {
}
/*iPhone 6 landscape*/
@media only screen and (min-device-width: 375px) and (max-device-width: 667px) and (orientation : landscape) {
}
/*iPhone 6+ Portrait*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : portrait) {
}
/*iPhone 6+ landscape*/
@media only screen and (min-device-width: 414px) and (max-device-width: 736px) and (orientation : landscape) {
}
/*iPhone 6 and iPhone 6+ portrait and landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px){ 
}
/*iPhone 6 and iPhone 6+ portrait*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : portrait){
}
/*iPhone 6 and iPhone 6+ landscape*/
@media only screen and (max-device-width: 640px), only screen and (max-device-width: 667px), only screen and (max-width: 480px) and (orientation : landscape){
}

Implement Google and other fonts in your site style sheet

Provided you have downloaded fonts which need to get implemented in the site, do following stuff

Method 1

1. Create a separate folder fonts parallel to your other folder,
2. if you have all the formats of font, then paste all of them inside folder,
3. if you dont have all formats, go to the font generator eg: https://www.web-font-generator.com/
4. upload any of the format you have and generate all other formats like .eot, .woff, .svg, .ttf, .otf
5. Then as told earlier, copy those files inside your fonts folder,
6. then paste below code in the style sheet. please make sure your font path is correct along with correct font name.


@font-face {
	font-family: 'Oswald-Bold';
	src: url('fonts/Oswald-Bold.eot');
	src: url('fonts/Oswald-Bold.otf');
	src: url('fonts/Oswald-Bold.woff') format('woff'), url('fonts/Oswald-Bold.ttf') format('truetype'), url('fonts/Oswald-Bold.svg') format('svg');	
}

then in your css you can use as:


.h4{
font-family:Oswald-Bold;
}

Method 2

Before taking all these tensions to implement your font, you first check if the font is available in google fonts

1. First go to google fonts if the font you require is available or not.ie : https://fonts.google.com/

2. search your required font
3. Click plus icon to add font in your list as shown below

4. then you place your link inside tag of your site header as

<head>
<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
</head>

then use font as


.h4{
font-family:Roboto;
}

Complete Media query to make your site responsive

The code below helps your site to fit in different screen sizes. we can find various media queries when we google it, among all those codes i feel these to be the most appropriate and easy to use.


//for larger screen ie large desktops
@media only screen and (min-width: 1200px) and (max-width: 1440px) { 

}

//for medium screen 15inch laptops
@media only screen and ( min-width: 992px) and (max-width: 1024px) { 

}

//for small size laptops ie 13inch laptops
@media only screen and ( max-width: 960px ) { 

}
//for ipad and tablets
@media only screen and ( min-width: 768px ) and ( max-width: 960px ) { 

}

//for mobiles either horizontal orientation or large size mobiles
@media only screen and ( max-width: 767px ) { 

}

 //for mobiles or vertical orientation
@media only screen and ( max-width: 479px ) { 
}


How to change color of placeholder

Here is the code to change the color of placeholder for you inputs

::-webkit-input-placeholder { /* Chrome/Opera/Safari */
  color: pink;
}
::-moz-placeholder { /* Firefox 19+ */
  color: pink;
}
:-ms-input-placeholder { /* IE 10+ */
  color: pink;
}
:-moz-placeholder { /* Firefox 18- */
  color: pink;
}