API tools faq
paste
Advertisement
arnabkumar

responsive layout

arnabkumar
May 29th, 2014
214
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
CSS 2.17 KB | None | 0 0
raw download clone embed print report
  1.                                                              /* Less Framework 4 */
  2.  
  3. /*  Less Framework 4 with 18/24 type presets
  4.     http://lessframework.com
  5.     by Joni Korpi
  6.     License: http://opensource.org/licenses/mit-license.php */
  7.  
  8. /* default layout from main stylesheet */
  9. /* This layout for when less framework */
  10.  
  11.  
  12.  
  13. /* Tablet Layout: 768px. */
  14.  
  15. @media only screen and (min-width: 768px) and (max-width: 991px) {
  16. .column {width:750px}
  17. body{background:#008C46;}
  18. }
  19.  
  20.  
  21.  
  22. /* Mobile Layout: 320px. */
  23.  
  24. @media only screen and (max-width: 767px) {
  25.  body{background:#A64CFF;}
  26.  
  27. .column {width:auto}
  28. }
  29.  
  30.  
  31.  
  32. /* Wide Mobile Layout: 480px. */
  33.  
  34. @media only screen and (min-width: 480px) and (max-width: 767px) {
  35.  body{background:#4CFF4C;}
  36. .column {width:450px}
  37.  
  38. }
  39.  
  40.  
  41.  
  42.  
  43.  
  44.  
  45.  
  46.  
  47.  
  48.  
  49.  
  50.  
  51.  
  52.  
  53.                                                           /* twitter bootstrap */
  54.  
  55.  
  56. /* This layout for when using bootstrap */
  57.  
  58.  
  59. /* source - http://stackoverflow.com/questions/18424798/twitter-bootstrap-3-how-to-use-media-queries */
  60.  
  61.  
  62. /* desktop first method media queries */
  63.  
  64. /* Large desktops and laptops */
  65. @media (min-width: 1200px) {
  66.  
  67. }
  68.  
  69. /* Portrait tablets and medium desktops */
  70. @media (min-width: 992px) and (max-width: 1199px) {
  71.  
  72. }
  73.  
  74. /* Portrait tablets and small desktops */
  75. @media (min-width: 768px) and (max-width: 991px) {
  76.  
  77. }
  78.  
  79. /* Landscape phones and portrait tablets */
  80. @media (max-width: 767px) {
  81.  
  82. }
  83.  
  84. /* Landscape phones and smaller */
  85. @media (max-width: 480px) {
  86.  
  87. }
  88.  
  89.  
  90.  
  91.  
  92.  
  93.  
  94.  
  95.  
  96.  
  97.  
  98.  
  99.  
  100.  
  101.  
  102.  
  103. /*==========  Mobile First Method  ==========*/
  104.  
  105.     /* Landscape phones and smaller */
  106. @media (max-width: 480px) {
  107.  body{background:#4CFF4C;}
  108.  
  109. }
  110.  
  111. /* Landscape phones and portrait tablets */
  112. @media (min-width: 480px) and (max-width: 768px) {
  113.  body{background:#A64CFF;}
  114.  
  115.  
  116. }
  117.  
  118.     /* Portrait tablets and small desktops */
  119. @media (min-width: 768px) and (max-width: 991px) {
  120. body{background:#008C46;}
  121. }
  122.  
  123.     /* Portrait tablets and medium desktops */
  124. @media (min-width: 992px) and (max-width: 1199px) {
  125.  body{background:#DFBFFF;}
  126.  
  127. }
  128.  
  129.  
  130.     /* Large desktops and laptops */ /* my desktop */
  131. @media (min-width: 1200px) {
  132. body{background:#DBDBEA;}
  133.  
  134. }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!