RyanEarnshaw

Untitled

Apr 12th, 2017
76
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 3.25 KB | None | 0 0
  1. /* MEDIA QUERIES */
  2.  
  3.  
  4.  
  5. /* ----------------------------------------------------*/
  6. /* Code That Doesnt Change Between Mobile Resolution */
  7. /* ----------------------------------------------------*/
  8. @media only screen and (min-width : 0px) and (max-width : 992px) {
  9. .innercont .body .column.c1 { width: 100%; margin-right: 0; }
  10. .innercont .body .column.c2 { width: 100% }
  11. .container-3 .questions {
  12. width: 100%
  13. }
  14. .container-3 .benefits {
  15. width: 100%;
  16. text-align: center;
  17. }
  18. .innercont .body .container-3 .benefit {
  19. height: auto;
  20. width: 33%;
  21. }
  22. .innercont .body .container-3 .benefit img {
  23. float: none;
  24. }
  25. .innercont .body .container-3 .benefit h1 { width: 100%; text-align: center; }
  26. .innercont .body .container-3 .benefit h2 { width: 100%; text-align: center; }
  27. .innercont .body .container-3 .questions h2 {
  28. text-align: center;
  29. }
  30. .innercont .body .container-3 .title-one {
  31. text-align: center;
  32. margin: 40px 0;
  33. }
  34. }
  35.  
  36.  
  37. /* ----------------------------------------------------*/
  38. /* Custom, iPhone Retina */
  39. /* ----------------------------------------------------*/
  40. @media only screen and (max-width : 320px) {
  41.  
  42. }
  43.  
  44.  
  45. /* ----------------------------------------------------*/
  46. /* Extra Small Devices, Phones */
  47. /* ----------------------------------------------------*/
  48. @media only screen and (min-width : 320px) and (max-width : 480px) {
  49. .icons .icon {
  50. width: 100%;
  51. padding: 30px 0;
  52. border: 1px solid #cacaca;
  53. }
  54. .innercont .body .be-smart h1 {
  55. width: 100%;
  56. }
  57. .innercont .body .be-smart h2 {
  58. width: 100%;
  59. }
  60. .innercont .body .container-3 .benefit {
  61. height: auto;
  62. width: 100%;
  63. margin: 10px 0;
  64. padding: 10px 0;;
  65. background-color: #ffffff;
  66. border: 1px solid #d1d1d1;
  67. }
  68. .innercont .body .container-3 .large-text {
  69. width: 100%;
  70. text-align: center;
  71. }
  72. .innercont .body .container-3 h2 {
  73. width: 100%;
  74. }
  75. .image-3 {
  76. display: none;
  77. }
  78. .innercont .body .container-2 h2 {
  79. width: 100%;
  80. }
  81. }
  82.  
  83.  
  84. /* ----------------------------------------------------*/
  85. /* Small Devices, Tablets */
  86. /* ----------------------------------------------------*/
  87. @media only screen and (min-width : 480px) and (max-width : 768px) {
  88. .icons .icon {
  89. width: 50%;
  90. margin: 20px 0;
  91. } .innercont .body .container-3 .large-text {
  92. width: 100%;
  93. text-align: center;
  94. }
  95. .innercont .body .container-3 h2 {
  96. width: 100%;
  97. }
  98. .image-3 {
  99. display: none;
  100. }
  101. .innercont .body .container-2 h2 {
  102. width: 100%;
  103. }
  104. }
  105.  
  106.  
  107. /* ----------------------------------------------------*/
  108. /* Medium Devices, Desktops */
  109. /* ----------------------------------------------------*/
  110. @media only screen and (min-width : 768px) and (max-width : 992px) {
  111.  
  112. }
  113.  
  114.  
  115. /* ----------------------------------------------------*/
  116. /* Large Devices, Wide Screens */
  117. /* ----------------------------------------------------*/
  118. @media only screen and (min-width : 992px) and (max-width : 1200px) {
  119.  
  120. }
  121.  
  122.  
  123.  
  124. /* ----------------------------------------------------*/
  125. /* SPECIAL */
  126. /* ----------------------------------------------------*/
  127. @media only screen and (min-width : 1200px) and (max-width : 1550px) {
  128.  
  129. }
Add Comment
Please, Sign In to add comment