Advanced Search

LibGuides 2 Mobile Adjustments

/ Published in: CSS
Save to your folder(s)
Strictly mobile media query changes.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML 
  1. /*Mobile Adjustments*/
  2.  
  3.  
  4. @media (min-width:769px) {
  5. .dropdown:hover .dropdown-menu {
  6. display: block;
  7. }
  8.  
  9.  
  10. }
  11.  
  12.  
  13. @media only screen and (max-device-width: 480px) {
  14. /* define mobile specific styles come here */
  15.  
  16. #header-unf {
  17. display: none;
  18. }
  19.  
  20. #slider-unf {
  21. display: none;	
  22. }
  23.  
  24. #menu-unf {
  25. max-width: 320px;	
  26. }
  27.  
  28. #menu-unf a {
  29. margin-left: 10px;
  30. }
  31.  
  32. #menu-unf .navbar-default {
  33. max-width: 320px;
  34. background-color: #6b6c6c;
  35. margin-left: auto;
  36. margin-right: auto;
  37. border:  none;
  38. }
  39.  
  40. #menu-unf .navbar-default .dropdown-menu a {
  41. background-color: #ffffff;
  42. color: #555;
  43. }
  44.  
  45. .padding-fix {
  46. max-width: 100%;
  47. padding-left: 5px;
  48. padding-right: 5px;
  49. }
  50.  
  51. #footer-unf {
  52. background-color: transparent;
  53. }
  54.  
  55. #footer-unf-container {
  56. max-width: 320px;
  57. }
  58.  
  59. }
  60.  
  61. @media only screen and (min-device-width: 320px) and (max-device-width: 568px) and (orientation: landscape) {
  62.  
  63. #menu-unf .navbar-default {
  64. max-width: 568px;
  65. }
  66.  
  67. #footer-unf {
  68. background-color: transparent;
  69. }
  70. #footer-unf-container {
  71. max-width: 568px;
  72. }
  73.  
  74. }
  75.  
  76. @media only screen and (min-device-width: 768px) and (max-device-width : 1024px) and (orientation : landscape){
  77.   /* For landscape iPad layouts */
  78.  
  79. #banner-unf {
  80. width: 1024px;
  81. }
  82.  
  83.  
  84. #menu-unf .navbar-default {
  85. width: 1024px;
  86. margin-left: auto;
  87. margin-right: auto;
  88. border:  none;
  89. }
  90.  
  91. #footer-unf-container {
  92. width: 1024px;
  93. margin-left: auto;
  94. margin-right: auto;
  95. }
  96.  
  97. .tabbed-unf #api_hours_today_iid928_lid0 {
  98. width: 100%;
  99. }
  100.  
  101. #slider-unf .carousel-caption {
  102. max-height: 150px;
  103. }
  104.  
  105. }
  106.  
  107. @media only screen and (min-device-width: 768px) and (max-device-width : 1024px) and (orientation : portrait){
  108.   /* For portrait iPad layouts */
  109.  
  110. #banner-unf {
  111. width: 768px;
  112. }
  113.  
  114. #menu-unf .navbar-default {
  115. width: 768px;
  116. margin-left: auto;
  117. margin-right: auto;
  118. border:  none;
  119. }
  120.  
  121. #search-unf {
  122. position: relative;
  123. bottom: 110px;
  124. }
  125.  
  126. #searchDiv input#box {
  127. width: 25%;	
  128. }
  129.  
  130. .searchSelect {
  131. padding-right: 120px;	
  132. }
  133.  
  134. .searchLink {
  135. margin-top: -20px;
  136. }
  137.  
  138. .mywings {
  139. margin-top: -110px;
  140. }
  141.  
  142. .padding-fix {
  143. width: 100%;
  144. padding-left: 10px;
  145. padding-right: 10px;
  146. }
  147.  
  148. #footer-unf {
  149. background-color: transparent;
  150. }
  151.  
  152. #footer-unf-container {
  153. max-width: 768px;
  154. }
  155.  
  156. }

URL: http://libguides.unf.edu/index.php?

Report this snippet


Comments

RSS Icon Subscribe to comments

You need to login to post a comment.