CSS   26
responsiveness css
Guest on 8th March 2023 12:12:31 PM


  1. @media only screen  and (min-width : 768px) {
  2. /*------------Navigation------*/
  3. body nav.navbar.bootsnav ul.nav > li > a.signin {
  4. color:#ffffff !important;
  5. border-radius: 2px;
  6. padding: 8px 20px;
  7. margin-left:5px;
  8. }
  9.  
  10. nav.navbar.bootsnav {
  11. box-shadow: 0 0px 15px 0px rgba(26, 28, 29,0.8);
  12. }
  13. nav.navbar.bootsnav.navbar-transparent.white{
  14. box-shadow:none;
  15. }
  16. h1{
  17. font-size:48px;
  18. line-height:52px;
  19. }
  20.  
  21. h2{
  22. font-size:36px;
  23. line-height:48px;
  24. }
  25.  
  26. h3{
  27. font-size:30px;
  28. line-height:36px;
  29. }
  30.  
  31. .banner-caption .btn-primary{
  32. margin-left: -1px;
  33. }
  34.  
  35. .no-padd {
  36. padding: 0;
  37. }
  38. .tools-features h4 {
  39. font-size: 2em;
  40. line-height: 1.2;
  41. }
  42. .tools-features p {
  43. font-size: 17px;
  44. line-height: 1.9;
  45. }
  46. .right-br{
  47. border-right: 1px solid #465056;
  48. }
  49.  
  50. .container-fluid {
  51. padding: 0;
  52. }
  53.  
  54.  
  55. .navbar-right, .navbar-left {
  56. margin-top: 20px;
  57. }
  58. .banner p {
  59. font-size: 18px;
  60. margin: 0 auto;
  61. margin-bottom:25px;
  62. }
  63. .banner{
  64. min-height:650px;
  65. }
  66. .banner h1{
  67. font-size:64px;
  68. margin-bottom:0.5em;
  69. }
  70. .app-content{
  71. margin-bottom:8em;
  72. padding-top: 3em;
  73. }
  74. .download-app img {
  75. position: absolute;
  76. max-width:80%;
  77. left:10%;
  78. }
  79. .extra-mrg{
  80. padding:0;
  81. margin-left:-15px;
  82. margin-right:-15px;
  83. }
  84. /*--------detail page design---*/
  85. .detail-desc-caption ul li{
  86. width:50%;
  87. display:inline-block;
  88. float:left;
  89. }
  90. /*----footer menu----*/
  91. .lg-menu ul {
  92.     margin-top: 10px;
  93. }
  94. .advance-detail.detail-desc-caption ul li strong {
  95.     font-size: 60px;
  96.     line-height: 1.2;
  97. }
  98. /*---error page --*/
  99. section.big-wrap {padding: 10% 0;}
  100. .error-page h2 {font-size: 250px;}
  101. }
  102.  
  103. @media only screen  and (min-width : 1024px) {
  104. .navbar .form-control{
  105. height:42px;
  106. }
  107. section{
  108. padding:80px 0 70px 0;
  109. }
  110. .banner{
  111. height:100vh;
  112. min-height:620px;
  113. }
  114. .simple-banner{
  115. height:100vh;
  116. min-height:550px;
  117. padding-top:14%;
  118. }
  119. .home-three-banner{
  120. height:100vh;
  121. min-height:550px;
  122. padding-top:12%;
  123. }
  124. .home-plane-banner{
  125. height:100vh;
  126. padding-top:13%;
  127. min-height:620px;
  128. }
  129. .company-brand {
  130. position:absolute;
  131. bottom:0;
  132. }
  133. .min-padd{
  134. padding:10px;
  135. }
  136. .banner-caption .form-control, .banner-caption .btn-primary, .banner-caption .btn-primary:focus, .banner-caption .btn-primary:hover{
  137. height:52px;
  138. }
  139. .banner-caption .form-control.right-bor{
  140. border-right:1px solid #e4e4e4;
  141. }
  142.  
  143. .simple-banner h1 {
  144. font-size: 6.5em;
  145. line-height:1;
  146. }
  147. .about p {
  148. font-size: 18px;
  149. line-height: 1.9;
  150. padding: 0 25px;
  151. }
  152.  
  153. section.about h2 {
  154. font-size: 42px;
  155. margin-bottom:25px;
  156. }
  157. .services h1{
  158. font-size:4em;
  159. margin-bottom:35px;
  160. }      
  161.  
  162. .sec-features-caption{
  163. max-width:90%;
  164. }
  165.  
  166. a.btn.call-btn {
  167.     font-size: 22px;
  168.     margin-top: 1em;
  169. }
  170. .app-content h2{
  171. margin-bottom:25px;
  172. font-size:50px;
  173. }
  174. .app-content h4 {
  175.     font-size: 25px;
  176. }
  177. nav.navbar.bootsnav ul.nav > li {
  178. padding: 4px 4px;
  179. }
  180. nav.navbar ul.nav > li > a{
  181. padding: 30px 15px;
  182. }
  183.  
  184. nav.navbar.bootsnav ul.dropdown-menu.megamenu-content .content ul.menu-col li a {
  185. text-align: left;
  186. padding: 5px 0;
  187. display: block;
  188. width: 100%;
  189. margin-bottom: 0;
  190. border-bottom: none;
  191. color:#555f69;
  192. font-size: 14.5px;
  193. font-weight:400;
  194. font-family: 'Quicksand', sans-serif;
  195. }
  196. nav.navbar .navbar-brand{
  197.         margin-top: 0;
  198. }
  199.  
  200. nav.navbar .navbar-brand img.logo{
  201.         width: 150px;
  202. }
  203.  
  204. nav.navbar .navbar-brand{
  205.         margin-top:2px;
  206. }
  207.  
  208. nav.navbar .navbar-brand img.logo{
  209.         width: 210px;
  210. }
  211.  
  212. nav.navbar li.dropdown ul.dropdown-menu{
  213.         border-top: solid 5px;
  214. }
  215.  
  216. /* Navbar Brand Top ------*/
  217. nav.navbar-brand-top .navbar-brand{
  218.         margin: 10px !important;
  219. }
  220.  
  221. /* Navbar Transparent & Fixed ------*/
  222. nav.navbar.bootsnav.navbar-transparent.white{
  223.         background-color:#ffffff;
  224.         border-bottom: none;
  225. }
  226.  
  227. nav.navbar.navbar-inverse.bootsnav.navbar-transparent.dark,
  228. nav.navbar.bootsnav.navbar-transparent.dark{
  229.         background-color: rgba(0,0,0,0.3);
  230.         border-bottom: solid 1px #555;
  231. }
  232.  
  233. nav.navbar.bootsnav.navbar-transparent.white .attr-nav{
  234.         border-left: solid 1px #bbb;
  235. }
  236.  
  237. nav.navbar.navbar-inverse.bootsnav.navbar-transparent.dark .attr-nav,
  238. nav.navbar.bootsnav.navbar-transparent.dark .attr-nav{
  239.         border-left: solid 1px #555;
  240. }
  241.  
  242. nav.navbar.bootsnav.no-background.white .attr-nav > ul > li > a,
  243. nav.navbar.bootsnav.navbar-transparent.white .attr-nav > ul > li > a,
  244. nav.navbar.bootsnav.navbar-transparent.white ul.nav > li > a,
  245. nav.navbar.bootsnav.no-background.white ul.nav > li > a{
  246.         color: rgba(255,255,255,0,5);
  247. }
  248.  
  249. nav.navbar.bootsnav.navbar-transparent.dark .attr-nav > ul > li > a,
  250. nav.navbar.bootsnav.navbar-transparent.dark ul.nav > li > a{
  251.         color: #eee;
  252. }
  253. .inner-header-title h1 {
  254. font-size: 60px;
  255. margin: 1em 0;
  256. }
  257. .inner-header-title h2 {
  258. font-size:45px;
  259. margin: 1em 0 10px 0;
  260. }
  261. .inner-header-title p{
  262.         font-size:22px;
  263. }
  264. }
  265.  
  266. @media only screen  and (min-width : 1200px) {
  267. nav.navbar.bootsnav ul.nav > li {
  268. padding: 4px 12px;
  269. }
  270.  
  271. nav.navbar.bootsnav ul.nav > li > a {
  272. padding: 8px 9px 22px 9px;
  273. }
  274. body nav.navbar.bootsnav ul.nav > li > a.signin {
  275. padding: 8px 30px;
  276. margin-left: 5px;
  277. }      
  278. .inner-header-title h1 {
  279. font-size: 80px;
  280. }
  281. .inner-header-title h2 {
  282. font-size:60px;
  283. margin-top:1.2em;
  284. }
  285. .inner-header-title p{
  286.         font-size:22px;
  287. }
  288. .navbar .form-control {
  289. min-width: 270px;
  290. height: 42px;
  291. margin-top: -5px;
  292. }
  293.  
  294. }
  295.  
  296. @media only screen and (max-width: 1023px) and (min-width: 993px){
  297. .navbar-nav>li>a {
  298.     padding: 9px 15px 26px 15px;
  299.     font-size: 12px;
  300. }
  301. .navbar-brand>img.logo.logo-display {
  302.     display: none;
  303. }
  304. img.logo.logo-scrolled {
  305.     max-width: 200px;
  306.     margin-top: 10px;
  307. }
  308. nav.navbar.bootsnav ul.nav > li.dropdown > a.dropdown-toggle:after {
  309.     font-family: 'FontAwesome';
  310.     content: "\f0d7";
  311.     margin-left: 5px;
  312.     margin-top: 2px;
  313. }
  314. nav.bootsnav .megamenu-content .title {
  315.     text-transform: capitalize;
  316.     font-family: 'Raleway', sans-serif;
  317.     font-size: 20px;
  318.     color: #55646f;
  319. }
  320. nav.navbar.bootsnav ul.dropdown-menu.megamenu-content .content ul.menu-col li a {
  321.     text-align: left;
  322.     padding: 5px 0;
  323.     display: block;
  324.     width: 100%;
  325.     margin-bottom: 0;
  326.     border-bottom: none;
  327.     color: #707c88;
  328.     font-size: 14.5px;
  329.     font-weight: 400;
  330.     font-family: 'Quicksand', sans-serif;
  331. }
  332. .navbar .form-control{
  333. height:42px;
  334. }
  335. }
  336.  
  337. @media screen and (max-width: 1199px) {
  338. h1 {font-size: 48px}
  339. h2 {font-size: 28px}
  340. h3 {font-size: 22px}
  341. h4 { font-size: 15px;}
  342.  
  343. /*--------Manage Company------*/
  344. .mng-company h4 {
  345.     font-size: 17px;
  346. }
  347. }
  348.  
  349. @media only screen and (max-width: 992px) and (min-width: 768px){
  350. /*----------Manage Member 2 ---------------*/
  351. .manage-resume-picbox img {
  352.     width: 60px;
  353.     height:60px;
  354. }
  355. .manage-resume-picbox {
  356.     width: 60px;
  357.     height: 60px;
  358.         display: inline-block;
  359. }
  360. .manage-resume-box .col-md-3.col-sm-3, .manage-resume-box .col-md-1.col-sm-1 {
  361.     padding: 0;
  362. }
  363. .brows-job-type span {
  364.     padding: 6px 5px;
  365.     font-size: 10px;
  366. }
  367. .brows-job-position h3 {
  368. font-size: 19px;
  369. }
  370. }
  371. @media (max-width: 1023px) {
  372. .banner-caption .form-control{
  373. margin-bottom:15px;
  374. }      
  375. }
  376.  
  377. @media screen and (max-width: 992px) {
  378. h1 {font-size: 42px}
  379. h2 {font-size: 25px}
  380. h3 {font-size: 20px}
  381. h4 { font-size: 15px;}
  382.  
  383. /* Navbar General ------*/
  384. nav.navbar .navbar-brand{
  385.         margin-top: 0;
  386.         position: relative;
  387.         top: -2px;
  388. }
  389.  
  390. nav.navbar .navbar-brand img.logo{
  391.         width: 140px;
  392. }
  393.  
  394. /* Navbar Mobile slide ------*/
  395. nav.navbar.navbar-mobile ul.nav > li > a{
  396.         padding: 15px 15px;
  397. }
  398.  
  399. nav.navbar.navbar-mobile ul.nav ul.dropdown-menu > li > a{
  400.         padding-right: 15px !important;
  401.         padding-top: 15px !important;
  402.         padding-bottom: 15px !important;
  403. }
  404.  
  405. nav.navbar.navbar-mobile ul.nav ul.dropdown-menu .col-menu .title{
  406.         padding-right: 30px !important;
  407.         padding-top: 13px !important;
  408.         padding-bottom: 13px !important;
  409. }
  410.  
  411. nav.navbar.navbar-mobile ul.nav ul.dropdown-menu .col-menu ul.menu-col li a{
  412.         padding-top: 13px !important;
  413.         padding-bottom: 13px !important;
  414. }
  415.  
  416. /* Navbar Full ------*/
  417.  nav.navbar-full .navbar-brand{
  418.         top: 0;
  419.         padding-top: 10px;
  420. }
  421. .navbar .form-control {
  422. margin: 14px 0;
  423. }
  424. nav.navbar.bootsnav .navbar-toggle {
  425. background-color: transparent !important;
  426. top: 9px;
  427. color: #d1d8dc;
  428. }
  429. nav.navbar.bootsnav .dropdown .megamenu-content .col-menu .title{
  430.     border-bottom: solid 1px #abbdca;
  431.     color: #b6c8d6;
  432.     }
  433. nav.navbar.bootsnav .dropdown .megamenu-content .col-menu ul > li > a {
  434.     border-bottom: solid 1px #abbdca;
  435.     padding: 8px 0;
  436. }
  437. ul.menu-col li a {
  438.     color: #b6c8d6;
  439.     font-size: 15px;
  440. }
  441. .col-menu {
  442.     padding: 0;
  443. }
  444. .navbar-nav .row {
  445.     margin-left: 0;
  446.     margin-right: 0;
  447. }
  448. .app-content {
  449.     margin-bottom: 2em;
  450.     padding-top: 3em;
  451. }
  452. .app-content a.btn.call-btn{
  453. line-height:2;
  454. }
  455. .app-content h2{
  456. font-size:32px;
  457. margin-bottom:10px;
  458. }
  459. .app-content h4 {
  460. font-size: 20px;
  461. }
  462. .inner-header-title h1 {
  463. font-size:50px;
  464. }
  465.  
  466. }
  467.  
  468. @media screen and (max-width: 767px) {
  469. h1 {font-size: 35px}
  470. h2 {font-size: 25px}
  471. h3 {font-size: 20px}
  472. h4 { font-size: 15px;}
  473. nav.navbar.navbar-inverse.navbar-mobile ul.nav{
  474.         border-top: solid 1px #222;
  475. }
  476. .inner-header-title h1 {
  477. font-size: 40px;
  478. margin-bottom: 2em;
  479. }
  480. .call-to-act-caption {
  481.     padding: 5em 1em;
  482.     text-align: center;
  483. }
  484. .call-to-act-caption h3 {
  485.     line-height: 1.7;
  486.     font-size: 17px;
  487. }
  488.  
  489. .home-plane-banner:before {
  490.     background: rgba(255,255,255,0.8);
  491. }
  492. /*------Manage Company--------*/
  493. .mng-company {
  494. text-align: center;
  495. }
  496. .mng-company .mng-company-pic {
  497.     display: table;
  498.     margin: 20px auto;
  499. }
  500. .mng-company h4 {
  501.     font-size: 18px;
  502. }
  503. /*-----------Manage Member 2 -------------*/
  504. .manage-resume-box {
  505.     text-align: center;
  506. }
  507. .manage-resume-picbox {
  508.     display: table;
  509.     margin: 20px auto;
  510. }
  511. .pagination>li>a, .pagination>li>span {
  512.     padding: 8px 14px;
  513. }
  514.  
  515. /*------------Manage Company------------*/
  516. .mng-resume .mng-resume-pic {
  517.     margin: 20px auto;
  518.     display: table;
  519. }
  520. .mng-resume {
  521.     text-align: center;
  522.         border-left: none;
  523.     border-top: 3px solid #ffffff;
  524. }
  525.  
  526. /*-----------Browse Company------------*/
  527. .brows-company {
  528.     text-align: center;
  529.         border-left:none;
  530.         border-top: 4px solid #ffffff;
  531. }
  532. .brows-company .brows-company-pic {
  533.     margin: 20px auto;
  534.     display: table;
  535. }
  536. .brows-company .brows-company-position p {
  537.     text-align: center;
  538. }
  539.  
  540. /*------------Browse Resume--------------*/
  541. .brows-resume {
  542.     text-align: center;
  543.         border-left:none;
  544.         border-top: 4px solid #ffffff;
  545. }
  546. .brows-resume .brows-resume-pic {
  547.     margin: 20px auto;
  548. }
  549. .br-resume {
  550.     margin-bottom: 10px;
  551. }
  552. .brows-resume .browse-resume-exp span {
  553.     float: none;
  554. }
  555. .brows-resume .browse-resume-rate span {
  556.     text-align: center;
  557. }
  558. /*------detail page design -----*/
  559. .detail-pannel-footer-btn a.footer-btn {
  560. margin-left: 0;
  561. float: left;
  562. margin-right: 10px;
  563. padding: 10px 30px;
  564. }
  565. .detail-status {
  566.     position: relative;
  567.     right: 0;
  568.     top: 0;
  569.     margin: 0 auto;
  570.     display: table;
  571. }
  572. .detail-pannel-footer-btn.pull-right {
  573.     float: left !important;
  574.         width: 100%;
  575. }
  576. ul.detail-list {
  577.     padding: 0;
  578. }
  579. h2.detail-title {
  580.     font-size: 17px;
  581.     padding:10px 12px;
  582. }
  583. .full-detail .panel-body {
  584.     padding: 0;
  585. }
  586. .ext-mrg.row.third-progress {
  587.     padding: 0;
  588.     margin: 0;
  589. }
  590. /*------------Footer Design---------*/
  591. .footer-widget {
  592.     padding: .5em 0em 1em 0em;
  593. }
  594. .footer-social {
  595.     margin-bottom: 0;
  596. }
  597. .lg-menu ul {
  598.     margin-top: 20px;
  599. }
  600. .lg-menu ul li {
  601.     padding-left: 0;
  602.     padding-right: 10px;
  603. }
  604. nav.navbar .navbar-brand {
  605. top: 4px;
  606. }
  607. /*---------------Brows job style---------------------*/
  608. .brows-job-list{
  609. text-align:center;
  610. padding-bottom: 30px;
  611. }
  612.  
  613. .banner-caption {
  614. padding: 20px 0px;
  615. }
  616. .wrap-search-filter{
  617.  
  618. }
  619. .item-click article{
  620. padding-left:15px;
  621. padding-right:15px;
  622. }
  623. .brows-job-category .item-click article {
  624.     padding-left: 0;
  625.     padding-right: 0;
  626. }
  627. .row.extra-mrg {
  628.     margin-left: 0;
  629.     margin-right: 0;
  630. }
  631. /*----------Search Job----------------*/
  632. .job-types {
  633.     text-align:left;
  634. }
  635. /*--------Advance search job-----*/
  636. article.advance-search-job {
  637.     text-align: center;
  638. }
  639. .advance-search-caption {
  640.     margin-left: 0;
  641. }
  642. .advance-search-img-box {
  643.     max-width: 70px;
  644.     float: none;
  645.     margin: 0 auto;
  646. }
  647. .advance-detail-pr .row.bottom-mrg {
  648.     margin-left: 0;
  649.     margin-right: 0;
  650. }
  651. .deatil-tab-employ.tool-tab .tab-content {
  652.     padding-left:12px;
  653.     padding-right:12px;
  654. }
  655. }
  656.  
  657. @media screen and (max-width: 479px) {
  658. h1 {font-size: 30px}
  659. h2 {font-size: 20px}
  660. h3 {font-size: 20px}
  661. h4 { font-size: 15px;}
  662. /*------pagination-----*/
  663. .pagination>li>a, .pagination>li>span {
  664.     padding: 6px 12px;
  665. }
  666. .inner-header-title h1 {
  667. font-size: 30px;
  668. margin-bottom: 2em;
  669. }
  670. .mng-company h4 {
  671.     font-size: 16px;
  672. }
  673.  
  674. /*-----Manage Candidate------*/
  675. .manage-cndt .cndt-status {
  676.     padding: 1px 23px;
  677. }
  678.  
  679. /*------detail page design -----*/
  680. .detail-pannel-footer-btn a.footer-btn {
  681. margin-left: 0;
  682. float: left;
  683. margin-right: 10px;
  684. padding: 8px 18px;
  685. }
  686. ul.detail-footer-social li {
  687.     display: inline-block;
  688.     padding-right: 2px;
  689. }
  690. .advance-detail.detail-desc-caption ul li {
  691.     font-size: 90%;
  692. }
  693. }
Raw Paste

Login or Register to edit or fork this paste. It's free.