Skip to content

Jeff Balicki / st_joseph

Go to a project
Toggle navigation
Toggle navigation pinning
577b4694 by Jeff Balicki
Options

mobile 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 8dc333f1
Inline Side-by-side
Showing 15 changed files with 241 additions and 41 deletions
...@@ -12,6 +12,11 @@ ...@@ -12,6 +12,11 @@
12 padding:0px 50%; 12 padding:0px 50%;
13 13
14 } 14 }
15 @media only screen and (max-width: 768px) {
16 .call-out-block{
17 padding: 40px 50%;
18 }
19 }
15 20
16 .call-out-block h2{ 21 .call-out-block h2{
17 text-align: center; 22 text-align: center;
......
...@@ -14469,7 +14469,7 @@ body { ...@@ -14469,7 +14469,7 @@ body {
14469 font-family: "Open Sans", sans-serif; 14469 font-family: "Open Sans", sans-serif;
14470 } 14470 }
14471 14471
14472 @media only screen and (max-width: 768px) { 14472 @media only screen and (max-width: 600px) {
14473 .site { 14473 .site {
14474 overflow-x: hidden; 14474 overflow-x: hidden;
14475 } 14475 }
...@@ -14629,6 +14629,11 @@ input[type=checkbox] { ...@@ -14629,6 +14629,11 @@ input[type=checkbox] {
14629 height: 57px; 14629 height: 57px;
14630 display: flex; 14630 display: flex;
14631 } 14631 }
14632 @media only screen and (max-width: 768px) {
14633 .pre-header {
14634 font-size: 15px;
14635 }
14636 }
14632 .pre-header .sponsored { 14637 .pre-header .sponsored {
14633 text-align: right; 14638 text-align: right;
14634 } 14639 }
...@@ -14647,6 +14652,11 @@ input[type=checkbox] { ...@@ -14647,6 +14652,11 @@ input[type=checkbox] {
14647 height: 128px; 14652 height: 128px;
14648 transition: 0.4s; 14653 transition: 0.4s;
14649 } 14654 }
14655 @media only screen and (max-width: 768px) {
14656 #main-nav {
14657 height: auto;
14658 }
14659 }
14650 #main-nav .custom-logo-link { 14660 #main-nav .custom-logo-link {
14651 margin-left: 0px; 14661 margin-left: 0px;
14652 } 14662 }
...@@ -14726,6 +14736,7 @@ input[type=checkbox] { ...@@ -14726,6 +14736,7 @@ input[type=checkbox] {
14726 } 14736 }
14727 @media only screen and (max-width: 768px) { 14737 @media only screen and (max-width: 768px) {
14728 #main-nav .mobile { 14738 #main-nav .mobile {
14739 text-transform: uppercase;
14729 display: block; 14740 display: block;
14730 visibility: visible; 14741 visibility: visible;
14731 } 14742 }
...@@ -14792,7 +14803,7 @@ input[type=checkbox] { ...@@ -14792,7 +14803,7 @@ input[type=checkbox] {
14792 width: 60%; 14803 width: 60%;
14793 height: 520px; 14804 height: 520px;
14794 } 14805 }
14795 @media only screen and (max-width: 768px) { 14806 @media only screen and (max-width: 900px) {
14796 .hero-content { 14807 .hero-content {
14797 width: 95%; 14808 width: 95%;
14798 margin: auto; 14809 margin: auto;
...@@ -14892,7 +14903,8 @@ input[type=checkbox] { ...@@ -14892,7 +14903,8 @@ input[type=checkbox] {
14892 @media only screen and (max-width: 768px) { 14903 @media only screen and (max-width: 768px) {
14893 .search .search-form .search-submit { 14904 .search .search-form .search-submit {
14894 left: unset; 14905 left: unset;
14895 margin-left: -10%; 14906 float: right;
14907 top: -40px;
14896 } 14908 }
14897 } 14909 }
14898 .search .search-form .search-submit:hover { 14910 .search .search-form .search-submit:hover {
...@@ -14949,8 +14961,9 @@ input[type=checkbox] { ...@@ -14949,8 +14961,9 @@ input[type=checkbox] {
14949 14961
14950 .navbar-toggler { 14962 .navbar-toggler {
14951 position: absolute; 14963 position: absolute;
14952 top: 40px; 14964 top: 30px;
14953 right: 20px; 14965 right: 20px;
14966 border-color: transparent !important;
14954 } 14967 }
14955 14968
14956 .fixed-top .navbar-toggler { 14969 .fixed-top .navbar-toggler {
...@@ -14962,7 +14975,6 @@ input[type=checkbox] { ...@@ -14962,7 +14975,6 @@ input[type=checkbox] {
14962 background-color: #fff; 14975 background-color: #fff;
14963 z-index: 99; 14976 z-index: 99;
14964 width: 100vw; 14977 width: 100vw;
14965 position: relative;
14966 margin-top: -2px; 14978 margin-top: -2px;
14967 padding: 20px 30px; 14979 padding: 20px 30px;
14968 } 14980 }
...@@ -14975,6 +14987,30 @@ input[type=checkbox] { ...@@ -14975,6 +14987,30 @@ input[type=checkbox] {
14975 } 14987 }
14976 } 14988 }
14977 14989
14990 .navbar-toggler:focus {
14991 color: rgba(0, 0, 0, 0);
14992 border-color: rgba(0, 0, 0, 0);
14993 }
14994
14995 .hamburger .line {
14996 width: 35px;
14997 height: 4px;
14998 background-color: #0484b8;
14999 display: block;
15000 margin: 8px auto;
15001 transition: all 0.3s ease-in-out;
15002 }
15003
15004 .navbar-toggler:not(.collapsed) .hamburger .line:nth-child(2) {
15005 opacity: 0;
15006 }
15007 .navbar-toggler:not(.collapsed) .hamburger .line:nth-child(1) {
15008 transform: translateY(13px) rotate(45deg);
15009 }
15010 .navbar-toggler:not(.collapsed) .hamburger .line:nth-child(3) {
15011 transform: translateY(-11px) rotate(-45deg);
15012 }
15013
14978 #wrapper-footer-full { 15014 #wrapper-footer-full {
14979 background-color: #fff; 15015 background-color: #fff;
14980 padding-bottom: 0px; 15016 padding-bottom: 0px;
...@@ -14990,6 +15026,11 @@ input[type=checkbox] { ...@@ -14990,6 +15026,11 @@ input[type=checkbox] {
14990 height: 4px; 15026 height: 4px;
14991 background-color: #ffa300; 15027 background-color: #ffa300;
14992 } 15028 }
15029 @media only screen and (max-width: 768px) {
15030 #wrapper-footer-full #footer-full-content .footer-widget .wp-block-columns .wp-block-column:nth-of-type(2) ::before {
15031 margin: 0px 0px 10px 0px;
15032 }
15033 }
14993 #wrapper-footer-full #footer-full-content .footer-widget .wp-block-columns .wp-block-column:nth-of-type(3) ::before { 15034 #wrapper-footer-full #footer-full-content .footer-widget .wp-block-columns .wp-block-column:nth-of-type(3) ::before {
14994 content: ""; 15035 content: "";
14995 margin: 20px 0px; 15036 margin: 20px 0px;
...@@ -14998,6 +15039,11 @@ input[type=checkbox] { ...@@ -14998,6 +15039,11 @@ input[type=checkbox] {
14998 height: 4px; 15039 height: 4px;
14999 background-color: #3f9c35; 15040 background-color: #3f9c35;
15000 } 15041 }
15042 @media only screen and (max-width: 768px) {
15043 #wrapper-footer-full #footer-full-content .footer-widget .wp-block-columns .wp-block-column:nth-of-type(3) ::before {
15044 margin: 0px 0px 20px 0px;
15045 }
15046 }
15001 #wrapper-footer-full #footer-full-content .footer-widget .wp-block-columns .wp-block-column:nth-of-type(4) p::before { 15047 #wrapper-footer-full #footer-full-content .footer-widget .wp-block-columns .wp-block-column:nth-of-type(4) p::before {
15002 content: ""; 15048 content: "";
15003 margin: 20px 0px; 15049 margin: 20px 0px;
...@@ -15006,6 +15052,11 @@ input[type=checkbox] { ...@@ -15006,6 +15052,11 @@ input[type=checkbox] {
15006 height: 4px; 15052 height: 4px;
15007 background-color: #e04e39; 15053 background-color: #e04e39;
15008 } 15054 }
15055 @media only screen and (max-width: 768px) {
15056 #wrapper-footer-full #footer-full-content .footer-widget .wp-block-columns .wp-block-column:nth-of-type(4) p::before {
15057 margin: 0px 0px 20px 0px;
15058 }
15059 }
15009 15060
15010 .newsletter { 15061 .newsletter {
15011 background-color: #6ed5ff; 15062 background-color: #6ed5ff;
...@@ -15103,7 +15154,7 @@ input[type=checkbox] { ...@@ -15103,7 +15154,7 @@ input[type=checkbox] {
15103 padding-inline-start: 20px; 15154 padding-inline-start: 20px;
15104 background-color: transparent !important; 15155 background-color: transparent !important;
15105 } 15156 }
15106 @media only screen and (max-width: 600px) { 15157 @media only screen and (max-width: 768px) {
15107 .carousel-items { 15158 .carousel-items {
15108 -webkit-padding-start: 0px; 15159 -webkit-padding-start: 0px;
15109 padding-inline-start: 0px; 15160 padding-inline-start: 0px;
...@@ -15125,7 +15176,7 @@ input[type=checkbox] { ...@@ -15125,7 +15176,7 @@ input[type=checkbox] {
15125 left: 0 !important; 15176 left: 0 !important;
15126 min-height: 340px !important; 15177 min-height: 340px !important;
15127 } 15178 }
15128 @media only screen and (max-width: 600px) { 15179 @media only screen and (max-width: 768px) {
15129 .carousel { 15180 .carousel {
15130 width: 95%; 15181 width: 95%;
15131 margin-left: 0px; 15182 margin-left: 0px;
...@@ -15137,7 +15188,7 @@ input[type=checkbox] { ...@@ -15137,7 +15188,7 @@ input[type=checkbox] {
15137 .carousel .swiper-button-prev { 15188 .carousel .swiper-button-prev {
15138 left: 7px !important; 15189 left: 7px !important;
15139 } 15190 }
15140 @media only screen and (max-width: 600px) { 15191 @media only screen and (max-width: 768px) {
15141 .carousel .swiper-button-prev { 15192 .carousel .swiper-button-prev {
15142 left: -5px !important; 15193 left: -5px !important;
15143 } 15194 }
...@@ -15152,7 +15203,7 @@ input[type=checkbox] { ...@@ -15152,7 +15203,7 @@ input[type=checkbox] {
15152 gap: 1rem; 15203 gap: 1rem;
15153 } 15204 }
15154 15205
15155 @media only screen and (max-width: 600px) { 15206 @media only screen and (max-width: 768px) {
15156 .testimonials-carousel { 15207 .testimonials-carousel {
15157 margin-left: 0px !important; 15208 margin-left: 0px !important;
15158 } 15209 }
...@@ -15160,9 +15211,10 @@ input[type=checkbox] { ...@@ -15160,9 +15211,10 @@ input[type=checkbox] {
15160 .testimonials-carousel .swiper-slide { 15211 .testimonials-carousel .swiper-slide {
15161 width: 890px !important; 15212 width: 890px !important;
15162 } 15213 }
15163 @media only screen and (max-width: 600px) { 15214 @media only screen and (max-width: 768px) {
15164 .testimonials-carousel .swiper-slide { 15215 .testimonials-carousel .swiper-slide {
15165 width: 98% !important; 15216 width: 100% !important;
15217 padding-left: 0px;
15166 } 15218 }
15167 } 15219 }
15168 .testimonials-carousel .swiper-slide .testimonials { 15220 .testimonials-carousel .swiper-slide .testimonials {
...@@ -15171,9 +15223,9 @@ input[type=checkbox] { ...@@ -15171,9 +15223,9 @@ input[type=checkbox] {
15171 border-radius: 25px 25px 0px 0px; 15223 border-radius: 25px 25px 0px 0px;
15172 margin-right: 20px; 15224 margin-right: 20px;
15173 } 15225 }
15174 @media only screen and (max-width: 600px) { 15226 @media only screen and (max-width: 768px) {
15175 .testimonials-carousel .swiper-slide .testimonials { 15227 .testimonials-carousel .swiper-slide .testimonials {
15176 width: 98%; 15228 width: 100% !important;
15177 margin-right: 0px; 15229 margin-right: 0px;
15178 } 15230 }
15179 } 15231 }
...@@ -15183,7 +15235,7 @@ input[type=checkbox] { ...@@ -15183,7 +15235,7 @@ input[type=checkbox] {
15183 margin-left: -15px !important; 15235 margin-left: -15px !important;
15184 min-height: 316px !important; 15236 min-height: 316px !important;
15185 } 15237 }
15186 @media only screen and (max-width: 600px) { 15238 @media only screen and (max-width: 768px) {
15187 .testimonials-carousel .swiper-slide .testimonials .row { 15239 .testimonials-carousel .swiper-slide .testimonials .row {
15188 margin-left: 0px !important; 15240 margin-left: 0px !important;
15189 } 15241 }
...@@ -15191,7 +15243,7 @@ input[type=checkbox] { ...@@ -15191,7 +15243,7 @@ input[type=checkbox] {
15191 .testimonials-carousel .swiper-slide .testimonials .col-md-1 { 15243 .testimonials-carousel .swiper-slide .testimonials .col-md-1 {
15192 background-size: cover; 15244 background-size: cover;
15193 } 15245 }
15194 @media only screen and (max-width: 600px) { 15246 @media only screen and (max-width: 768px) {
15195 .testimonials-carousel .swiper-slide .testimonials .col-md-1 { 15247 .testimonials-carousel .swiper-slide .testimonials .col-md-1 {
15196 padding-left: 0px; 15248 padding-left: 0px;
15197 } 15249 }
...@@ -15267,9 +15319,9 @@ input[type=checkbox] { ...@@ -15267,9 +15319,9 @@ input[type=checkbox] {
15267 max-width: 1344px; 15319 max-width: 1344px;
15268 } 15320 }
15269 } 15321 }
15270 @media only screen and (max-width: 600px) { 15322 @media only screen and (max-width: 768px) {
15271 .promo-carousel .swiper-slide .promo.row { 15323 .promo-carousel .swiper-slide .promo.row {
15272 width: 80%; 15324 width: 100%;
15273 } 15325 }
15274 } 15326 }
15275 .promo-carousel .swiper-slide .promo_content { 15327 .promo-carousel .swiper-slide .promo_content {
...@@ -15470,6 +15522,11 @@ label[for=quicksearch] { ...@@ -15470,6 +15522,11 @@ label[for=quicksearch] {
15470 width: 600px; 15522 width: 600px;
15471 border-bottom: 1px solid #8e908f !important; 15523 border-bottom: 1px solid #8e908f !important;
15472 } 15524 }
15525 @media only screen and (max-width: 1100px) {
15526 #quicksearch {
15527 width: 100%;
15528 }
15529 }
15473 15530
15474 .filters { 15531 .filters {
15475 border-bottom: 1px solid #ffa300 !important; 15532 border-bottom: 1px solid #ffa300 !important;
...@@ -15499,6 +15556,20 @@ label[for=quicksearch] { ...@@ -15499,6 +15556,20 @@ label[for=quicksearch] {
15499 justify-content: space-between; 15556 justify-content: space-between;
15500 margin-bottom: 20px; 15557 margin-bottom: 20px;
15501 } 15558 }
15559 @media only screen and (max-width: 1100px) {
15560 .filters .filter-group {
15561 flex-direction: column;
15562 }
15563 }
15564 .filters .filter-group .sort-button-group {
15565 align-self: flex-end;
15566 }
15567 @media only screen and (max-width: 1100px) {
15568 .filters .filter-group .sort-button-group {
15569 align-self: inherit;
15570 margin-top: 20px;
15571 }
15572 }
15502 .filters .filter-group .sort-button-group .btn, .filters .filter-group .sort-button-group .wpcf7 input[type=submit], .wpcf7 .filters .filter-group .sort-button-group input[type=submit], .filters .filter-group .sort-button-group .woocommerce-notices-wrapper .woocommerce-message a.button, .woocommerce-notices-wrapper .woocommerce-message .filters .filter-group .sort-button-group a.button, .filters .filter-group .sort-button-group .woocommerce-info a.button, .woocommerce-info .filters .filter-group .sort-button-group a.button { 15573 .filters .filter-group .sort-button-group .btn, .filters .filter-group .sort-button-group .wpcf7 input[type=submit], .wpcf7 .filters .filter-group .sort-button-group input[type=submit], .filters .filter-group .sort-button-group .woocommerce-notices-wrapper .woocommerce-message a.button, .woocommerce-notices-wrapper .woocommerce-message .filters .filter-group .sort-button-group a.button, .filters .filter-group .sort-button-group .woocommerce-info a.button, .woocommerce-info .filters .filter-group .sort-button-group a.button {
15503 border: 1px solid #0081bc; 15574 border: 1px solid #0081bc;
15504 } 15575 }
...@@ -15510,6 +15581,11 @@ label[for=quicksearch] { ...@@ -15510,6 +15581,11 @@ label[for=quicksearch] {
15510 display: flex; 15581 display: flex;
15511 flex-direction: row; 15582 flex-direction: row;
15512 } 15583 }
15584 @media only screen and (max-width: 1100px) {
15585 .category-filter-group {
15586 flex-direction: column;
15587 }
15588 }
15513 15589
15514 .category-type, 15590 .category-type,
15515 .category-filter { 15591 .category-filter {
...@@ -15521,6 +15597,12 @@ label[for=quicksearch] { ...@@ -15521,6 +15597,12 @@ label[for=quicksearch] {
15521 margin: 0.25rem 0; 15597 margin: 0.25rem 0;
15522 margin-right: 1rem; 15598 margin-right: 1rem;
15523 } 15599 }
15600 @media only screen and (max-width: 1100px) {
15601 .category-type,
15602 .category-filter {
15603 flex-direction: column;
15604 }
15605 }
15524 .category-type label, 15606 .category-type label,
15525 .category-filter label { 15607 .category-filter label {
15526 padding-left: 30px; 15608 padding-left: 30px;
...@@ -15689,6 +15771,12 @@ label[for=quicksearch] { ...@@ -15689,6 +15771,12 @@ label[for=quicksearch] {
15689 margin: 15px; 15771 margin: 15px;
15690 padding: 10px; 15772 padding: 10px;
15691 } 15773 }
15774 @media only screen and (max-width: 768px) {
15775 .course-list:not(.resources) .element-item {
15776 width: calc(100% - 30px);
15777 height: auto;
15778 }
15779 }
15692 15780
15693 .course-list.resources .element-item { 15781 .course-list.resources .element-item {
15694 position: relative; 15782 position: relative;
...@@ -15892,6 +15980,11 @@ td.hidden { ...@@ -15892,6 +15980,11 @@ td.hidden {
15892 padding: 21px 22px; 15980 padding: 21px 22px;
15893 width: 100%; 15981 width: 100%;
15894 } 15982 }
15983 @media only screen and (max-width: 768px) {
15984 .table-like__item {
15985 height: auto;
15986 }
15987 }
15895 .table-like__item .item { 15988 .table-like__item .item {
15896 width: 100%; 15989 width: 100%;
15897 } 15990 }
...@@ -15921,12 +16014,28 @@ td.hidden { ...@@ -15921,12 +16014,28 @@ td.hidden {
15921 .resources .category-filter-group { 16014 .resources .category-filter-group {
15922 flex-direction: column; 16015 flex-direction: column;
15923 } 16016 }
16017 @media only screen and (max-width: 1200px) {
16018 .resources .category-filter-group {
16019 width: 80%;
16020 }
16021 }
15924 .resources .category-filter-group .category { 16022 .resources .category-filter-group .category {
15925 display: flex; 16023 display: flex;
15926 } 16024 }
16025 @media only screen and (max-width: 1100px) {
16026 .resources .category-filter-group .category {
16027 flex-direction: column;
16028 margin-bottom: 20px;
16029 }
16030 }
15927 .resources .category-filter-group .type { 16031 .resources .category-filter-group .type {
15928 display: flex; 16032 display: flex;
15929 } 16033 }
16034 @media only screen and (max-width: 1100px) {
16035 .resources .category-filter-group .type {
16036 flex-direction: column;
16037 }
16038 }
15930 16039
15931 .toolkit:before { 16040 .toolkit:before {
15932 height: 50px; 16041 height: 50px;
......
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
This diff could not be displayed because it is too large.
...@@ -19,7 +19,7 @@ if(get_post_meta(get_the_id(), 'newsletter_sign_up', true) || get_post_type( get ...@@ -19,7 +19,7 @@ if(get_post_meta(get_the_id(), 'newsletter_sign_up', true) || get_post_type( get
19 </div> 19 </div>
20 <?php } ?> 20 <?php } ?>
21 <?php get_template_part( 'sidebar-templates/sidebar', 'footerfull' ); ?> 21 <?php get_template_part( 'sidebar-templates/sidebar', 'footerfull' ); ?>
22 22 <!--
23 <div class="wrapper" id="wrapper-footer"> 23 <div class="wrapper" id="wrapper-footer">
24 24
25 <div class="<?php echo esc_attr( $container ); ?>"> 25 <div class="<?php echo esc_attr( $container ); ?>">
......
...@@ -25,7 +25,7 @@ $container = get_theme_mod( 'understrap_container_type' ); ...@@ -25,7 +25,7 @@ $container = get_theme_mod( 'understrap_container_type' );
25 <?php get_template_part( 'global-templates/navbar-branding' ); ?> 25 <?php get_template_part( 'global-templates/navbar-branding' ); ?>
26 26
27 <button 27 <button
28 class="navbar-toggler" 28 class="navbar-toggler collapsed"
29 type="button" 29 type="button"
30 data-bs-toggle="collapse" 30 data-bs-toggle="collapse"
31 data-bs-target="#navbarNavDropdown" 31 data-bs-target="#navbarNavDropdown"
...@@ -33,7 +33,11 @@ $container = get_theme_mod( 'understrap_container_type' ); ...@@ -33,7 +33,11 @@ $container = get_theme_mod( 'understrap_container_type' );
33 aria-expanded="false" 33 aria-expanded="false"
34 aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>" 34 aria-label="<?php esc_attr_e( 'Toggle navigation', 'understrap' ); ?>"
35 > 35 >
36 <span class="navbar-toggler-icon"></span> 36 <div class="hamburger">
37 <span class="line"></span>
38 <span class="line"></span>
39 <span class="line"></span>
40 </div>
37 </button> 41 </button>
38 <div class="row"> 42 <div class="row">
39 43
......
...@@ -26,7 +26,7 @@ function course_list(){ ...@@ -26,7 +26,7 @@ function course_list(){
26 <div class="category-filter"> <input id="<?php echo $term->slug ; ?>" value=".<?php echo $term->slug ; ?>" type="checkbox" class="sr-only"><label for="<?php echo $term->slug ; ?>"><?php echo $term->name ; ?></label></div> 26 <div class="category-filter"> <input id="<?php echo $term->slug ; ?>" value=".<?php echo $term->slug ; ?>" type="checkbox" class="sr-only"><label for="<?php echo $term->slug ; ?>"><?php echo $term->name ; ?></label></div>
27 <?php }; ?> 27 <?php }; ?>
28 </div> 28 </div>
29 <div class="btn-group sort-button-group align-self-end"> 29 <div class="btn-group sort-button-group">
30 <button class="btn btn-light" data-sort-direction="asc" data-sort-value="coursename" type="button">Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button> 30 <button class="btn btn-light" data-sort-direction="asc" data-sort-value="coursename" type="button">Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
31 <button class="btn btn-light" data-sort-direction="asc" data-sort-value="coursedate" type="button">Date <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button> 31 <button class="btn btn-light" data-sort-direction="asc" data-sort-value="coursedate" type="button">Date <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
32 </div> 32 </div>
......
...@@ -38,7 +38,7 @@ function resources_list(){ ...@@ -38,7 +38,7 @@ function resources_list(){
38 <?php }; ?> 38 <?php }; ?>
39 </div> 39 </div>
40 </div> 40 </div>
41 <div class="btn-group sort-button-group align-self-end"> 41 <div class="btn-group sort-button-group">
42 <button class="btn btn-light" data-sort-direction="asc" data-sort-value="1" type="button">Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button> 42 <button class="btn btn-light" data-sort-direction="asc" data-sort-value="1" type="button">Name <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
43 <button class="btn btn-light" data-sort-direction="asc" data-sort-value="3" type="button">Date <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button> 43 <button class="btn btn-light" data-sort-direction="asc" data-sort-value="3" type="button">Date <span aria-hidden="true" class="glyphicon glyphicon-chevron-up"></span></button>
44 </div> 44 </div>
......
...@@ -27,7 +27,7 @@ ...@@ -27,7 +27,7 @@
27 margin-inline-end: 0px; 27 margin-inline-end: 0px;
28 padding-inline-start: 20px; 28 padding-inline-start: 20px;
29 background-color: transparent !important; 29 background-color: transparent !important;
30 @media only screen and (max-width: 600px) { 30 @media only screen and (max-width: 768px) {
31 padding-inline-start: 0px; 31 padding-inline-start: 0px;
32 } 32 }
33 } 33 }
...@@ -44,7 +44,7 @@ ...@@ -44,7 +44,7 @@
44 .carousel { 44 .carousel {
45 width: 100vw; 45 width: 100vw;
46 margin-left: calc((100% - 100vw) / 2); 46 margin-left: calc((100% - 100vw) / 2);
47 @media only screen and (max-width: 600px) { 47 @media only screen and (max-width: 768px) {
48 width: 95%; 48 width: 95%;
49 margin-left: 0px; 49 margin-left: 0px;
50 } 50 }
...@@ -55,7 +55,7 @@ ...@@ -55,7 +55,7 @@
55 } 55 }
56 .swiper-button-prev { 56 .swiper-button-prev {
57 left: 7px !important; 57 left: 7px !important;
58 @media only screen and (max-width: 600px) { 58 @media only screen and (max-width: 768px) {
59 left: -5px !important; 59 left: -5px !important;
60 } 60 }
61 } 61 }
...@@ -72,21 +72,22 @@ ...@@ -72,21 +72,22 @@
72 72
73 // testimonials carousel css 73 // testimonials carousel css
74 .testimonials-carousel { 74 .testimonials-carousel {
75 @media only screen and (max-width: 600px) { 75 @media only screen and (max-width: 768px) {
76 margin-left: 0px !important; 76 margin-left: 0px !important;
77 } 77 }
78 .swiper-slide { 78 .swiper-slide {
79 width: 890px !important; 79 width: 890px !important;
80 @media only screen and (max-width: 600px) { 80 @media only screen and (max-width: 768px) {
81 width: 98% !important; 81 width: 100% !important;
82 padding-left:0px;
82 } 83 }
83 .testimonials { 84 .testimonials {
84 width: 890px; 85 width: 890px;
85 background: #e5f2f8; 86 background: #e5f2f8;
86 border-radius: 25px 25px 0px 0px; 87 border-radius: 25px 25px 0px 0px;
87 margin-right: 20px; 88 margin-right: 20px;
88 @media only screen and (max-width: 600px) { 89 @media only screen and (max-width: 768px) {
89 width: 98%; 90 width: 100% !important;
90 margin-right: 0px; 91 margin-right: 0px;
91 } 92 }
92 .row { 93 .row {
...@@ -94,14 +95,14 @@ ...@@ -94,14 +95,14 @@
94 border-bottom: 20px solid #ffa300; 95 border-bottom: 20px solid #ffa300;
95 margin-left: -15px !important; 96 margin-left: -15px !important;
96 min-height: 316px !important; 97 min-height: 316px !important;
97 @media only screen and (max-width: 600px) { 98 @media only screen and (max-width: 768px) {
98 margin-left: 0px !important; 99 margin-left: 0px !important;
99 } 100 }
100 } 101 }
101 102
102 .col-md-1 { 103 .col-md-1 {
103 background-size: cover; 104 background-size: cover;
104 @media only screen and (max-width: 600px) { 105 @media only screen and (max-width: 768px) {
105 padding-left: 0px; 106 padding-left: 0px;
106 } 107 }
107 } 108 }
...@@ -183,8 +184,8 @@ ...@@ -183,8 +184,8 @@
183 @media only screen and (min-width: 1400px) { 184 @media only screen and (min-width: 1400px) {
184 max-width: 1344px; 185 max-width: 1344px;
185 } 186 }
186 @media only screen and (max-width: 600px) { 187 @media only screen and (max-width: 768px) {
187 width: 80%; 188 width: 100%;
188 } 189 }
189 margin: 40px auto; 190 margin: 40px auto;
190 padding: 50px 0px; 191 padding: 50px 0px;
......
...@@ -4,7 +4,7 @@ body{ ...@@ -4,7 +4,7 @@ body{
4 font-family: 'Open Sans', sans-serif; 4 font-family: 'Open Sans', sans-serif;
5 5
6 } 6 }
7 @media only screen and (max-width: 768px) { 7 @media only screen and (max-width: 600px) {
8 .site{ 8 .site{
9 overflow-x: hidden; 9 overflow-x: hidden;
10 } 10 }
......
...@@ -8,6 +8,9 @@ label[for="quicksearch"] { ...@@ -8,6 +8,9 @@ label[for="quicksearch"] {
8 } 8 }
9 #quicksearch { 9 #quicksearch {
10 width: 600px; 10 width: 600px;
11 @media only screen and (max-width:1100px) {
12 width: 100%;
13 }
11 border-bottom: 1px solid #8e908f !important; 14 border-bottom: 1px solid #8e908f !important;
12 } 15 }
13 .filters { 16 .filters {
...@@ -36,7 +39,15 @@ label[for="quicksearch"] { ...@@ -36,7 +39,15 @@ label[for="quicksearch"] {
36 flex-direction: row; 39 flex-direction: row;
37 justify-content: space-between; 40 justify-content: space-between;
38 margin-bottom: 20px; 41 margin-bottom: 20px;
42 @media only screen and (max-width: 1100px) {
43 flex-direction: column;
44 }
39 .sort-button-group { 45 .sort-button-group {
46 align-self: flex-end;
47 @media only screen and (max-width: 1100px) {
48 align-self:inherit;
49 margin-top: 20px;
50 }
40 .btn { 51 .btn {
41 border: 1px solid #0081bc; 52 border: 1px solid #0081bc;
42 } 53 }
...@@ -49,11 +60,17 @@ label[for="quicksearch"] { ...@@ -49,11 +60,17 @@ label[for="quicksearch"] {
49 .category-filter-group { 60 .category-filter-group {
50 display: flex; 61 display: flex;
51 flex-direction: row; 62 flex-direction: row;
63 @media only screen and (max-width: 1100px) {
64 flex-direction: column;
65 }
52 } 66 }
53 .category-type, 67 .category-type,
54 .category-filter { 68 .category-filter {
55 display: flex; 69 display: flex;
56 flex-direction: row; 70 flex-direction: row;
71 @media only screen and (max-width: 1100px) {
72 flex-direction: column;
73 }
57 font-size: 18px; 74 font-size: 18px;
58 font-size: 1.125rem; 75 font-size: 1.125rem;
59 color: #515151; 76 color: #515151;
...@@ -224,6 +241,10 @@ label[for="quicksearch"] { ...@@ -224,6 +241,10 @@ label[for="quicksearch"] {
224 float: left; 241 float: left;
225 width: calc(33.33% - 30px); 242 width: calc(33.33% - 30px);
226 height: 600px; 243 height: 600px;
244 @media only screen and (max-width: 768px) {
245 width: calc(100% - 30px);
246 height: auto;
247 }
227 margin: 15px; 248 margin: 15px;
228 padding: 10px; 249 padding: 10px;
229 } 250 }
......
...@@ -14,6 +14,9 @@ ...@@ -14,6 +14,9 @@
14 display: block; 14 display: block;
15 width: 120px; 15 width: 120px;
16 height: 4px; 16 height: 4px;
17 @media only screen and (max-width: 768px) {
18 margin: 00px 0px 10px 0px;;
19 }
17 background-color: #ffa300; 20 background-color: #ffa300;
18 } 21 }
19 } 22 }
...@@ -25,6 +28,9 @@ ...@@ -25,6 +28,9 @@
25 width: 120px; 28 width: 120px;
26 height: 4px; 29 height: 4px;
27 background-color: #3f9c35; 30 background-color: #3f9c35;
31 @media only screen and (max-width: 768px) {
32 margin: 00px 0px 20px 0px;;
33 }
28 } 34 }
29 } 35 }
30 .wp-block-column:nth-of-type(4) { 36 .wp-block-column:nth-of-type(4) {
...@@ -35,6 +41,9 @@ ...@@ -35,6 +41,9 @@
35 width: 120px; 41 width: 120px;
36 height: 4px; 42 height: 4px;
37 background-color: #e04e39; 43 background-color: #e04e39;
44 @media only screen and (max-width: 768px) {
45 margin: 00px 0px 20px 0px;;
46 }
38 } 47 }
39 } 48 }
40 } 49 }
......
...@@ -3,6 +3,9 @@ ...@@ -3,6 +3,9 @@
3 color: #fff; 3 color: #fff;
4 height: 57px; 4 height: 57px;
5 display: flex; 5 display: flex;
6 @media only screen and (max-width: 768px) {
7 font-size: 15px;
8 }
6 .sponsored { 9 .sponsored {
7 text-align: right; 10 text-align: right;
8 .logo { 11 .logo {
...@@ -20,6 +23,9 @@ ...@@ -20,6 +23,9 @@
20 background-color: #fff; 23 background-color: #fff;
21 height: 128px; 24 height: 128px;
22 transition: 0.4s; 25 transition: 0.4s;
26 @media only screen and (max-width: 768px) {
27 height: auto;
28 }
23 .custom-logo-link { 29 .custom-logo-link {
24 margin-left: 0px; 30 margin-left: 0px;
25 @media only screen and (max-width: 768px) { 31 @media only screen and (max-width: 768px) {
...@@ -98,6 +104,7 @@ ...@@ -98,6 +104,7 @@
98 display: none; 104 display: none;
99 visibility: hidden; 105 visibility: hidden;
100 @media only screen and (max-width: 768px) { 106 @media only screen and (max-width: 768px) {
107 text-transform: uppercase;
101 display: block; 108 display: block;
102 visibility:visible; 109 visibility:visible;
103 } 110 }
...@@ -159,7 +166,7 @@ ...@@ -159,7 +166,7 @@
159 .hero-content { 166 .hero-content {
160 width: 60%; 167 width: 60%;
161 height: 520px; 168 height: 520px;
162 @media only screen and (max-width: 768px) { 169 @media only screen and (max-width: 900px) {
163 width: 95%; 170 width: 95%;
164 margin: auto; 171 margin: auto;
165 } 172 }
...@@ -257,7 +264,9 @@ ...@@ -257,7 +264,9 @@
257 left: -56px; 264 left: -56px;
258 @media only screen and (max-width: 768px) { 265 @media only screen and (max-width: 768px) {
259 left: unset; 266 left: unset;
260 margin-left: -10%; 267 float: right;
268 top: -40px;
269
261 270
262 } 271 }
263 } 272 }
...@@ -311,8 +320,9 @@ ...@@ -311,8 +320,9 @@
311 320
312 .navbar-toggler{ 321 .navbar-toggler{
313 position: absolute; 322 position: absolute;
314 top: 40px; 323 top: 30px;
315 right: 20px; 324 right: 20px;
325 border-color:transparent !important ;
316 } 326 }
317 .fixed-top{ 327 .fixed-top{
318 .navbar-toggler{ 328 .navbar-toggler{
...@@ -326,19 +336,47 @@ ...@@ -326,19 +336,47 @@
326 background-color: #fff; 336 background-color: #fff;
327 z-index: 99; 337 z-index: 99;
328 width: 100vw; 338 width: 100vw;
329 position: relative;
330 margin-top: -2px; 339 margin-top: -2px;
331 padding: 20px 30px; 340 padding: 20px 30px;
332 } 341 }
333 } 342 }
334 343
335 344
336 #navbarNavDropdown.show {
337 345
338 }
339 .pre-header .container, 346 .pre-header .container,
340 .nav-container{ 347 .nav-container{
341 @media only screen and (max-width: 1000px) { 348 @media only screen and (max-width: 1000px) {
342 max-width: unset !important; 349 max-width: unset !important;
343 } 350 }
351 }
352
353 .navbar-toggler:focus{
354 color: rgba(0,0,0,.0);
355 border-color: rgba(0,0,0,.0);
356
357 }
358
359 .hamburger .line{
360 width: 35px;
361 height: 4px;
362 background-color: #0484b8;
363 display: block;
364 margin: 8px auto;
365 -webkit-transition: all 0.3s ease-in-out;
366 -o-transition: all 0.3s ease-in-out;
367 transition: all 0.3s ease-in-out;
368 }
369 .navbar-toggler:not(.collapsed){
370
371 .hamburger .line:nth-child(2){
372 opacity: 0;
373 }
374
375 .hamburger .line:nth-child(1){
376 transform: translateY(13px) rotate(45deg);
377 }
378
379 .hamburger .line:nth-child(3){
380 transform: translateY(-11px) rotate(-45deg);
381 }
344 } 382 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -72,6 +72,9 @@ td.hidden { ...@@ -72,6 +72,9 @@ td.hidden {
72 margin-bottom: 20px; 72 margin-bottom: 20px;
73 border-radius: 10px; 73 border-radius: 10px;
74 height: 130px; 74 height: 130px;
75 @media only screen and (max-width: 768px) {
76 height: auto;
77 }
75 background: #ffffff 0% 0% no-repeat padding-box; 78 background: #ffffff 0% 0% no-repeat padding-box;
76 box-shadow: 0px 3px 6px #00000029; 79 box-shadow: 0px 3px 6px #00000029;
77 padding: 21px 22px; 80 padding: 21px 22px;
...@@ -104,12 +107,22 @@ td.hidden { ...@@ -104,12 +107,22 @@ td.hidden {
104 .resources { 107 .resources {
105 .category-filter-group { 108 .category-filter-group {
106 flex-direction: column; 109 flex-direction: column;
110 @media only screen and (max-width: 1200px) {
111 width: 80%;
112 }
107 113
108 .category { 114 .category {
109 display: flex; 115 display: flex;
116 @media only screen and (max-width: 1100px) {
117 flex-direction: column;
118 margin-bottom: 20px;
119 }
110 } 120 }
111 .type { 121 .type {
112 display: flex; 122 display: flex;
123 @media only screen and (max-width: 1100px) {
124 flex-direction: column;
125 }
113 } 126 }
114 } 127 }
115 } 128 }
......