responsive-elements.css 2.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126
  1. /* === Mobile devices - Portrait (320px wide) === */
  2. @media only screen and (min-width: 20em) {
  3. }
  4. /* === Mobile devices - Landscape (480px wide) === */
  5. @media only screen and (min-width: 30em) {
  6. }
  7. /* === Tablet devices - Portrait (768px wide) === */
  8. @media only screen and (min-width: 48em) {
  9. }
  10. /* === Tablet devices - Landscape (900px wide) === */
  11. @media only screen and (min-width: 56.25em) {
  12. }
  13. /* === Netbook devices (1100px wide) === */
  14. @media only screen and (min-width: 68.75em) {
  15. }
  16. /* === Desktop devices (1300px wide) === */
  17. @media only screen and (min-width: 81.25em) {
  18. }
  19. /* === Desktop devices (1600px wide) === */
  20. @media only screen and (min-width: 81.25em) {
  21. }
  22. /* Responsive elements */
  23. @media (max-width: 1050px) {
  24. /* Information Boxes */
  25. .info-box.icon-wrapper {
  26. padding-left: 50px;
  27. }
  28. .info-box.icon-wrapper .icon-large {
  29. font-size: 70px;
  30. }
  31. .info-box .stats {
  32. font-size: 20px;
  33. }
  34. .info-box b {
  35. overflow: hidden;
  36. white-space: nowrap;
  37. text-overflow: ellipsis;
  38. }
  39. }
  40. @media screen and (max-width: 650px) {
  41. .mobile-hidden {
  42. display: none !important;
  43. }
  44. .mobile-buttons a.btn {
  45. display: block;
  46. float: none;
  47. min-width: 1px;
  48. max-width: 100%;
  49. margin: 0 0 5px;
  50. }
  51. .heading-1 .heading-content {
  52. width: 80%;
  53. }
  54. .heading-1 small {
  55. overflow: hidden;
  56. text-overflow: ellipsis;
  57. }
  58. .content-box .content-box-wrapper {
  59. padding: 5px;
  60. }
  61. .popover {
  62. min-width: 100px !important;
  63. }
  64. .medium-box,
  65. .scrollable-small {
  66. width: 300px !important;
  67. }
  68. /* Chats */
  69. .chat-box li {
  70. padding-right: 50px;
  71. }
  72. .chat-box li.float-left {
  73. padding-left: 50px;
  74. }
  75. .chat-box .popover .popover-content {
  76. font-size: 11px;
  77. line-height: 1.5em;
  78. padding: 5px;
  79. }
  80. .chat-box .chat-author img {
  81. width: 34px;
  82. min-width: 34px;
  83. }
  84. /* Notifications */
  85. .notifications-box li .notification-text {
  86. display: block;
  87. overflow: hidden;
  88. width: 44%;
  89. white-space: nowrap;
  90. text-overflow: ellipsis;
  91. }
  92. .notifications-box li .notification-time {
  93. margin: 0;
  94. }
  95. /* Messages */
  96. .messages-box li .messages-text {
  97. overflow: hidden;
  98. width: 100%;
  99. white-space: nowrap;
  100. text-overflow: ellipsis;
  101. }
  102. }