Media Query

Media Query

Mobile

Mobile portrait

@media only screen and (max-width: 767px){
  /* STYLES GO HERE */
}

Mobile landscape

@media only screen 
and (min-width: 320px) 
and (max-width: 767px)
and (orientation: landscape){
  /* STYLES GO HERE */
}

Tablet

Tablet in portrait and landscape (iPad)

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { 
  /* STYLES GO HERE */
}

Note: use just min-width if you want use for responsive.

Tablet in landscape (iPad)

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 
  /* STYLES GO HERE */
}

Tablet in portrait (iPad)

@media only screen 
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) { 
  /* STYLES GO HERE */ 
}`

Mobile first approach

You should use min-width and then raise the pixels for different viewport:

@media (min-width: 40em) {
  /* STYLES GO HERE */
}

NO Mobile First

@media only screen and (max-width : 768px) {
  /* STYLES GO HERE */
}
@media only screen and (max-width: 1024px), screen and (max-height: 680px){
  /* STYLES GO HERE */
}
@media only screen and (max-width: 1024px) and (max-height: 768px) {
  /* STYLES GO HERE */
@media only screen and (max-width: 1440px) {
  /* STYLES GO HERE */
}

Target IE with media query

@media all and (-ms-high-contrast:none){
  /* STYLES GO HERE */
}

Fontawesome icons inside a palaceholder

This is one way to use fontawesome icons inside a palaceholder:

in the CSS you have to use this code for the class fontAwesome:

.fontAwesome {
font-family: 'Helvetica', FontAwesome, sans-serif;
}

After that in the HTML you have to add the **fontawesome class** first and then the **fontawesome icon code** inside the placeholder:

<input class="fontAwesome" name="emailAddress" type="text" placeholder="[insert-fa-code-here;] insert email address ..." />

and it’s done!!!

You can simply apply the class every time inside your input with the relative code in the placeholder.

And even more, you can use this method by entering the code into a generic element such as a link or a simple text using the same class “fontAwesome” used for the placeholder:

<a class="fontAwesome" href="#">[insert-fa-code-here;] Great job!!!</a>

You can see the result or read the post from my codePen post.

See the Pen FontAwesome and placeholders by Massimiliano Ranauro (@huckbit) on CodePen.

bootstrap: change tooltip color

To change tooltip color in bootstrap add to your wrap the class “red-tooltip” (red can be another colors, simply change the color code in your css) and then add this code to the css file:

.red-tooltip + .tooltip > .tooltip-inner {background-color: #f00;}
.red-tooltip + .tooltip > .tooltip-arrow {border-bottom-color:#f00; }

You have to change border-bottom with “right” if you want use right view or “left” in you want use left view or top for top view

css: using the @font-face directive

The secret to web fonts is a CSS command called the @font-face directive.

This command at its most basic names the font and tells the browser where to find the
font file for download.

You place the @font-face directive in your style sheet, just like a regular style.

For example, say you’re using the League Gothic font. You have a True Type file named League_Gothic-webfont.ttf inside a fonts folder on your site.

You’d instruct a browser to download this font by adding the @font-face directive to your style sheet like this:

@font-face {
font-family: "League Gothic";
src: url('../fonts/League_Gothic-webfont.ttf');
}

The first property, font-family, you’ve seen before (page 127), but here it has a different purpose. When used inside an @font-face directive, font-family assigns a
name to the font.

When used inside an @font-face directive, font-family assigns a
name to the font.

For example, say you want to use the League Gothic font for all paragraphs
on a page. You could then use this style:

p {
font-family: "League Gothic";
}