skills.css 1.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586
  1. .skills-section .card .card-head {
  2. background-color: #f9fafc;
  3. height: -webkit-fit-content;
  4. height: -moz-fit-content;
  5. height: fit-content;
  6. padding: 0.7rem;
  7. padding-bottom: 0rem;
  8. border-bottom: 0.0625rem solid rgba(0, 0, 0, 0.125);
  9. }
  10. .skills-section h1 > span{
  11. margin-top: -55px; /* Size of fixed header */
  12. padding-bottom:55px;
  13. display: block;
  14. }
  15. .skills-section .skill-card-link {
  16. text-decoration: none;
  17. }
  18. .skills-section .card .card-img-xs {
  19. margin-right: 0.5rem;
  20. }
  21. .skills-section .card {
  22. margin-top: 0.5rem;
  23. margin-bottom: 0.5rem;
  24. height: 100%;
  25. }
  26. .skills-section .card .card-body {
  27. padding-top: 0.2rem;
  28. padding-left: 0.7rem;
  29. }
  30. /* ============= Device specific fixes ======= */
  31. /* Large screens such as TV */
  32. @media only screen and (min-width: 1824px) {
  33. }
  34. /* Extra large devices (large desktops, 1200px and up) */
  35. @media (max-width: 1400px) {
  36. }
  37. @media (max-width: 1200px) {
  38. }
  39. /* IPad Pro */
  40. @media (max-width: 1024px) {
  41. }
  42. /* Large devices (desktops, 992px and up) */
  43. @media (max-width: 992px) {
  44. }
  45. /* Medium devices (tablets, 768px and up) */
  46. @media only screen and (max-width: 768px) {
  47. .skills-section {
  48. padding-left: 0;
  49. padding-right: 0;
  50. }
  51. .skills-section .container {
  52. max-width: 95%;
  53. }
  54. }
  55. /* Small devices (landscape phones, 576px and up) */
  56. @media only screen and (max-width: 576px) {
  57. }
  58. /* iPhoneX, iPhone 6,7,8 */
  59. @media only screen and (max-width: 375px) {
  60. }
  61. /* Galaxy S5, Moto G4 */
  62. @media only screen and (max-width: 360px) {
  63. }
  64. /* iPhone 5 or before */
  65. @media only screen and (max-width: 320px) {
  66. }