"media query, browser & mobile device css hacks (iphone)"
Bootstrap 4.1.1 Snippet by tapan

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h1> Media CSS & Hacks </h1>
</div>
<div class="row">
<h3>Media Query CSS </h3>
<h3>All Browsers CSS hacks (IE9, IE10, IE11, MS Edge, Safari, Mozilla Firefox, Google Chrome ) </h3>
<h3>Mobile device css hacks (iphones)</h3>
</div>
<div class="row">
<p> Please find all css hack in CSS Tab </p>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/* ----------- Media Query ----------- */
/* ##Device = Desktops, ##Screen = 1281px to higher resolution desktops */
@media (min-width: 1281px) {
}
/* ##Device = Laptops, Desktops, ##Screen = B/w 1025px to 1280px */
@media (min-width: 1025px) and (max-width: 1280px) {
}
/* ##Device = Tablets, Ipads (portrait), ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) {
}
/* ##Device = Tablets, Ipads (landscape), ##Screen = B/w 768px to 1024px */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {
}
/* ##Device = Low Resolution Tablets, Mobiles (Landscape), ##Screen = B/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {
}
/* ##Device = Most of the Smartphones Mobiles (Portrait), ##Screen = B/w 320px to 479px */
@media (min-width: 320px) and (max-width: 480px) {
}
/* ----------- Chromex and safari CSS ----------- */
@media screen and (-webkit-min-device-pixel-ratio:0) {
/* Safari and Chrome, if Chrome rule needed */
.your-class {your css property}
/* Safari only css */
::i-block-chrome, .your-class {your css property}
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Argon Dashboard PRO
BS4 Login, Register FORM + Mobile
Mobile Nav Bar
Mobile-Friendly API Documentation

Questions / Comments: