Skip to content

MSF / msf-climate-hub

Go to a project
Toggle navigation
Toggle navigation pinning
67f46a03 by Jeff Balicki
Options

mobile 

Signed-off-by: Jeff <jeff@gotenzing.com>
1 parent 260eea0f
Inline Side-by-side
Showing 17 changed files with 292 additions and 118 deletions
...@@ -46,7 +46,7 @@ $carousel_style = get_field('carousel_style'); ...@@ -46,7 +46,7 @@ $carousel_style = get_field('carousel_style');
46 <div class="swiper-slide"> 46 <div class="swiper-slide">
47 <div class="carousel-content"> 47 <div class="carousel-content">
48 48
49 <div class="row"> 49
50 <div class="promo-image" > 50 <div class="promo-image" >
51 <?php $image = get_the_post_thumbnail_url( $page->ID, 'medium' ); 51 <?php $image = get_the_post_thumbnail_url( $page->ID, 'medium' );
52 $thumbnail_id = get_post_meta( $page->ID, '_thumbnail_id', true ); 52 $thumbnail_id = get_post_meta( $page->ID, '_thumbnail_id', true );
...@@ -58,7 +58,7 @@ $carousel_style = get_field('carousel_style'); ...@@ -58,7 +58,7 @@ $carousel_style = get_field('carousel_style');
58 <img src="<?php echo $image; ?>" alt="<?php echo $img_alt ?>" loading="eager"> 58 <img src="<?php echo $image; ?>" alt="<?php echo $img_alt ?>" loading="eager">
59 </div> 59 </div>
60 <div class="promo-text"><a class="understrap-read-more-link" href="<?php echo get_permalink($page->ID);?>"><?php echo get_the_title($page->ID); ?></a></div> 60 <div class="promo-text"><a class="understrap-read-more-link" href="<?php echo get_permalink($page->ID);?>"><?php echo get_the_title($page->ID); ?></a></div>
61 </div> 61
62 </div> 62 </div>
63 </div> 63 </div>
64 <?php endwhile; ?> 64 <?php endwhile; ?>
......
...@@ -15687,6 +15687,12 @@ body { ...@@ -15687,6 +15687,12 @@ body {
15687 width: 100%; 15687 width: 100%;
15688 } 15688 }
15689 15689
15690 @media only screen and (max-width: 62.5rem) {
15691 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
15692 padding: 0px 0px 14px 28px;
15693 margin-top: 0px !important;
15694 }
15695 }
15690 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu { 15696 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
15691 z-index: 999; 15697 z-index: 999;
15692 border-radius: 0; 15698 border-radius: 0;
...@@ -16595,7 +16601,7 @@ html.mega-menu-primary-off-canvas-open #wpadminbar { ...@@ -16595,7 +16601,7 @@ html.mega-menu-primary-off-canvas-open #wpadminbar {
16595 display: inline-block; 16601 display: inline-block;
16596 position: absolute; 16602 position: absolute;
16597 top: 1.1rem; 16603 top: 1.1rem;
16598 right: 10px; 16604 right: 20px;
16599 transform: rotate(90deg); 16605 transform: rotate(90deg);
16600 } 16606 }
16601 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link:after { 16607 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-item-has-children.mega-toggle-on > a.mega-menu-link:after {
...@@ -16638,7 +16644,7 @@ html.mega-menu-primary-off-canvas-open #wpadminbar { ...@@ -16638,7 +16644,7 @@ html.mega-menu-primary-off-canvas-open #wpadminbar {
16638 margin: 0.625rem auto 0rem auto; 16644 margin: 0.625rem auto 0rem auto;
16639 color: #fff; 16645 color: #fff;
16640 background-color: #EE0000; 16646 background-color: #EE0000;
16641 border-radius: 1.25rem; 16647 border-radius: 20px;
16642 text-align: left; 16648 text-align: left;
16643 height: 2.5rem; 16649 height: 2.5rem;
16644 margin-top: 0rem; 16650 margin-top: 0rem;
...@@ -16750,6 +16756,7 @@ html.mega-menu-primary-off-canvas-open #wpadminbar { ...@@ -16750,6 +16756,7 @@ html.mega-menu-primary-off-canvas-open #wpadminbar {
16750 font-style: normal !important; 16756 font-style: normal !important;
16751 font-size: 1rem !important; 16757 font-size: 1rem !important;
16752 line-height: 1.25rem !important; 16758 line-height: 1.25rem !important;
16759 display: none !important;
16753 } 16760 }
16754 .list-wrapper3 .mega-sub-menu .mega-menu-item a { 16761 .list-wrapper3 .mega-sub-menu .mega-menu-item a {
16755 color: #000 !important; 16762 color: #000 !important;
...@@ -16766,11 +16773,11 @@ html.mega-menu-primary-off-canvas-open #wpadminbar { ...@@ -16766,11 +16773,11 @@ html.mega-menu-primary-off-canvas-open #wpadminbar {
16766 } 16773 }
16767 #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-3:after { 16774 #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-3:after {
16768 content: "×"; 16775 content: "×";
16769 font-size: 2.125rem; 16776 font-size: 1.8rem;
16770 font-weight: bold; 16777 font-weight: 700;
16771 color: #fff; 16778 color: #fff;
16772 margin: 0 0 0 0.525rem; 16779 margin: 0 0 0 0.6rem;
16773 line-height: 1.2625rem; 16780 line-height: 1.3625rem;
16774 } 16781 }
16775 16782
16776 #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-3:after { 16783 #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-3:after {
...@@ -19414,6 +19421,18 @@ ul.sf_date_field .sf-datepicker { ...@@ -19414,6 +19421,18 @@ ul.sf_date_field .sf-datepicker {
19414 padding-top: 31px; 19421 padding-top: 31px;
19415 padding-bottom: 20px; 19422 padding-bottom: 20px;
19416 } 19423 }
19424 @media only screen and (max-width: 48.875rem) {
19425 .full-black {
19426 margin-left: -50px;
19427 margin-right: -50px;
19428 padding-left: 50px;
19429 padding-right: 50px;
19430 width: calc(100vw + 50px);
19431 }
19432 }
19433 .full-black .wp-block-columns {
19434 gap: 0em;
19435 }
19417 .full-black h2, .full-black .h2 { 19436 .full-black h2, .full-black .h2 {
19418 color: #fff; 19437 color: #fff;
19419 font-size: 22px; 19438 font-size: 22px;
...@@ -20164,10 +20183,6 @@ ul.sf_date_field .sf-datepicker { ...@@ -20164,10 +20183,6 @@ ul.sf_date_field .sf-datepicker {
20164 .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal a:hover { 20183 .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal a:hover {
20165 color: #699 !important; 20184 color: #699 !important;
20166 } 20185 }
20167 .admin-bar .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal {
20168 top: 3px;
20169 }
20170
20171 .promo-area { 20186 .promo-area {
20172 width: 100%; 20187 width: 100%;
20173 display: flex; 20188 display: flex;
...@@ -20312,9 +20327,11 @@ ul.sf_date_field .sf-datepicker { ...@@ -20312,9 +20327,11 @@ ul.sf_date_field .sf-datepicker {
20312 margin-top: 24px; 20327 margin-top: 24px;
20313 padding: 0rem 3.125rem; 20328 padding: 0rem 3.125rem;
20314 } 20329 }
20315 @media only screen and (max-width: 48.875rem) { 20330 @media only screen and (max-width: 67.063rem) {
20316 .carousel:not(.is-admin) { 20331 .carousel:not(.is-admin) {
20317 padding-right: 30px !important; 20332 left: 0%;
20333 width: 100vw;
20334 padding: 0rem 0rem;
20318 } 20335 }
20319 } 20336 }
20320 20337
...@@ -20332,11 +20349,6 @@ ul.sf_date_field .sf-datepicker { ...@@ -20332,11 +20349,6 @@ ul.sf_date_field .sf-datepicker {
20332 .carousel-content { 20349 .carousel-content {
20333 height: 260px; 20350 height: 260px;
20334 } 20351 }
20335 @media only screen and (max-width: 48.875rem) {
20336 .carousel-content {
20337 padding: 0rem 0.625rem;
20338 }
20339 }
20340 20352
20341 .promo-image { 20353 .promo-image {
20342 width: 340px; 20354 width: 340px;
...@@ -20344,10 +20356,12 @@ ul.sf_date_field .sf-datepicker { ...@@ -20344,10 +20356,12 @@ ul.sf_date_field .sf-datepicker {
20344 overflow: hidden; 20356 overflow: hidden;
20345 padding: 0px 4px; 20357 padding: 0px 4px;
20346 } 20358 }
20347 @media only screen and (max-width: 48.875rem) { 20359 @media only screen and (max-width: 67.063rem) {
20348 .promo-image { 20360 .promo-image {
20349 width: 100%; 20361 min-height: 186px !important;
20350 height: auto; 20362 max-height: 186px !important;
20363 max-width: 340px;
20364 min-width: 340px;
20351 } 20365 }
20352 } 20366 }
20353 .promo-image img { 20367 .promo-image img {
...@@ -20372,15 +20386,6 @@ ul.sf_date_field .sf-datepicker { ...@@ -20372,15 +20386,6 @@ ul.sf_date_field .sf-datepicker {
20372 line-height: 1.5rem; 20386 line-height: 1.5rem;
20373 text-align: left; 20387 text-align: left;
20374 } 20388 }
20375 @media only screen and (max-width: 48.875rem) {
20376 .promo-carousel .promo-text {
20377 margin-left: 0rem;
20378 margin-top: 1.25rem;
20379 font-size: 16px;
20380 line-height: 1.5rem;
20381 text-align: left;
20382 }
20383 }
20384 .promo-carousel .understrap-read-more-link { 20389 .promo-carousel .understrap-read-more-link {
20385 font-weight: bold; 20390 font-weight: bold;
20386 text-transform: capitalize; 20391 text-transform: capitalize;
...@@ -20409,6 +20414,11 @@ ul.sf_date_field .sf-datepicker { ...@@ -20409,6 +20414,11 @@ ul.sf_date_field .sf-datepicker {
20409 left: -15px !important; 20414 left: -15px !important;
20410 top: calc(50% - 1rem) !important; 20415 top: calc(50% - 1rem) !important;
20411 } 20416 }
20417 @media only screen and (max-width: 67.063rem) {
20418 .swiper-button-prev {
20419 display: none !important;
20420 }
20421 }
20412 .swiper-button-prev:after { 20422 .swiper-button-prev:after {
20413 content: "" !important; 20423 content: "" !important;
20414 width: 0.6875rem; 20424 width: 0.6875rem;
...@@ -20421,6 +20431,11 @@ ul.sf_date_field .sf-datepicker { ...@@ -20421,6 +20431,11 @@ ul.sf_date_field .sf-datepicker {
20421 top: 0.5rem; 20431 top: 0.5rem;
20422 left: 11px; 20432 left: 11px;
20423 } 20433 }
20434 @media only screen and (max-width: 67.063rem) {
20435 .swiper-button-prev:after {
20436 display: none;
20437 }
20438 }
20424 20439
20425 .swiper-button-next { 20440 .swiper-button-next {
20426 background-color: #EE0000; 20441 background-color: #EE0000;
...@@ -20432,9 +20447,9 @@ ul.sf_date_field .sf-datepicker { ...@@ -20432,9 +20447,9 @@ ul.sf_date_field .sf-datepicker {
20432 border-radius: 1.25rem; 20447 border-radius: 1.25rem;
20433 display: none; 20448 display: none;
20434 } 20449 }
20435 @media only screen and (max-width: 25rem) { 20450 @media only screen and (max-width: 67.063rem) {
20436 .swiper-button-next { 20451 .swiper-button-next {
20437 right: -0.625rem !important; 20452 display: none !important;
20438 } 20453 }
20439 } 20454 }
20440 .swiper-button-next:after { 20455 .swiper-button-next:after {
...@@ -20450,12 +20465,31 @@ ul.sf_date_field .sf-datepicker { ...@@ -20450,12 +20465,31 @@ ul.sf_date_field .sf-datepicker {
20450 top: 0.5rem; 20465 top: 0.5rem;
20451 left: 0.8125rem; 20466 left: 0.8125rem;
20452 } 20467 }
20468 @media only screen and (max-width: 67.063rem) {
20469 .swiper-button-next:after {
20470 display: none;
20471 }
20472 }
20453 20473
20454 .swiper-button-next:hover, 20474 .swiper-button-next:hover,
20455 .swiper-button-prev:hover { 20475 .swiper-button-prev:hover {
20456 background-color: #669999; 20476 background-color: #669999;
20457 } 20477 }
20458 20478
20479 .swiper-slide {
20480 width: auto !important;
20481 flex-shrink: 0;
20482 display: block;
20483 height: 100%;
20484 max-height: 100%;
20485 }
20486
20487 .swiper-wrapper {
20488 max-height: 100%;
20489 height: 100%;
20490 display: flex;
20491 }
20492
20459 .pojo-a11y-grayscale { 20493 .pojo-a11y-grayscale {
20460 overflow-y: scroll !important; 20494 overflow-y: scroll !important;
20461 } 20495 }
...@@ -21069,6 +21103,11 @@ ul.sf_date_field .sf-datepicker { ...@@ -21069,6 +21103,11 @@ ul.sf_date_field .sf-datepicker {
21069 justify-content: center; 21103 justify-content: center;
21070 margin: 24px 0; 21104 margin: 24px 0;
21071 } 21105 }
21106 @media only screen and (max-width: 67.063rem) {
21107 .news-and-stories-block {
21108 display: block;
21109 }
21110 }
21072 .news-and-stories-block .post-list-left-col { 21111 .news-and-stories-block .post-list-left-col {
21073 flex-basis: 50%; 21112 flex-basis: 50%;
21074 display: flex; 21113 display: flex;
...@@ -21090,6 +21129,12 @@ ul.sf_date_field .sf-datepicker { ...@@ -21090,6 +21129,12 @@ ul.sf_date_field .sf-datepicker {
21090 margin: 0; 21129 margin: 0;
21091 gap: 12px; 21130 gap: 12px;
21092 } 21131 }
21132 @media only screen and (max-width: 67.063rem) {
21133 .news-and-stories-block ul {
21134 flex-direction: row;
21135 padding-left: 0px !important;
21136 }
21137 }
21093 .news-and-stories-block ul .article-card { 21138 .news-and-stories-block ul .article-card {
21094 min-height: 117px; 21139 min-height: 117px;
21095 } 21140 }
...@@ -21098,11 +21143,13 @@ ul.sf_date_field .sf-datepicker { ...@@ -21098,11 +21143,13 @@ ul.sf_date_field .sf-datepicker {
21098 height: 100%; 21143 height: 100%;
21099 text-decoration: none; 21144 text-decoration: none;
21100 } 21145 }
21101 .news-and-stories-block ul .article-card.lg { 21146 @media only screen and (min-width: 67.063rem) {
21147 .news-and-stories-block ul .article-card.lg {
21102 min-height: 28rem; 21148 min-height: 28rem;
21103 max-height: 28rem; 21149 max-height: 28rem;
21150 }
21104 } 21151 }
21105 .news-and-stories-block ul .article-card.lg .image-large { 21152 .news-and-stories-block ul .article-card.lg .image.large {
21106 position: relative; 21153 position: relative;
21107 } 21154 }
21108 .news-and-stories-block ul .article-card.lg .overlay { 21155 .news-and-stories-block ul .article-card.lg .overlay {
...@@ -21160,6 +21207,7 @@ ul.sf_date_field .sf-datepicker { ...@@ -21160,6 +21207,7 @@ ul.sf_date_field .sf-datepicker {
21160 max-width: 31rem; 21207 max-width: 31rem;
21161 min-width: 31rem; 21208 min-width: 31rem;
21162 min-height: 8.438rem; 21209 min-height: 8.438rem;
21210 margin-right: 30px;
21163 } 21211 }
21164 .article-card a { 21212 .article-card a {
21165 color: white; 21213 color: white;
...@@ -21235,18 +21283,22 @@ ul.sf_date_field .sf-datepicker { ...@@ -21235,18 +21283,22 @@ ul.sf_date_field .sf-datepicker {
21235 width: 100%; 21283 width: 100%;
21236 margin-top: 0.938rem; 21284 margin-top: 0.938rem;
21237 } 21285 }
21238 .article-card .image { 21286 .article-card .image:not(.large) {
21287 -o-object-fit: cover;
21288 object-fit: cover;
21289 overflow: hidden;
21290 position: relative;
21291 }
21292 @media only screen and (min-width: 67.063rem) {
21293 .article-card .image:not(.large) {
21239 flex-basis: 40%; 21294 flex-basis: 40%;
21240 min-width: 214px; 21295 min-width: 214px;
21241 max-width: 214px; 21296 max-width: 214px;
21242 min-height: 117px; 21297 min-height: 117px;
21243 max-height: 117px; 21298 max-height: 117px;
21244 -o-object-fit: cover; 21299 }
21245 object-fit: cover;
21246 overflow: hidden;
21247 position: relative;
21248 } 21300 }
21249 .article-card .image img { 21301 .article-card .image:not(.large) img {
21250 -o-object-fit: cover; 21302 -o-object-fit: cover;
21251 object-fit: cover; 21303 object-fit: cover;
21252 height: 100%; 21304 height: 100%;
...@@ -21292,6 +21344,49 @@ ul.sf_date_field .sf-datepicker { ...@@ -21292,6 +21344,49 @@ ul.sf_date_field .sf-datepicker {
21292 display: none; 21344 display: none;
21293 } 21345 }
21294 21346
21347 @media only screen and (max-width: 67.063rem) {
21348 .post-list-right-col,
21349 .post-list-left-col {
21350 display: none !important;
21351 }
21352 .mobile-article-list {
21353 display: block;
21354 overflow: scroll;
21355 }
21356 .mobile-article-list {
21357 pointer-events: auto;
21358 position: relative;
21359 overflow: scroll;
21360 width: 100vw;
21361 }
21362 .mobile-article-list ul {
21363 flex-wrap: nowrap;
21364 width: 1800px;
21365 }
21366 .mobile-article-list .sm,
21367 .mobile-article-list .lg {
21368 max-width: 340px;
21369 min-width: 340px;
21370 }
21371 .mobile-article-list .sm .image,
21372 .mobile-article-list .lg .image {
21373 position: relative;
21374 min-height: 186px;
21375 max-height: 186px;
21376 }
21377 .mobile-article-list .sm .scale-wrapper,
21378 .mobile-article-list .lg .scale-wrapper {
21379 min-height: 186px !important;
21380 max-height: 186px !important;
21381 overflow: hidden;
21382 position: relative;
21383 }
21384 .mobile-article-list .sm a,
21385 .mobile-article-list .lg a {
21386 flex-direction: column;
21387 height: 100%;
21388 }
21389 }
21295 .has-blue-color, 21390 .has-blue-color,
21296 .has-blue-color:visited { 21391 .has-blue-color:visited {
21297 color: #0d6efd; 21392 color: #0d6efd;
......
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.
...@@ -26123,28 +26123,12 @@ ...@@ -26123,28 +26123,12 @@
26123 26123
26124 jQuery(document).ready(function ($) { 26124 jQuery(document).ready(function ($) {
26125 jQuery('.carousel-items').each(function () { 26125 jQuery('.carousel-items').each(function () {
26126 //var offset = ((window.innerWidth - $('#content').width()) / 2) - 28;
26127 //var offsetAfter = ((window.innerWidth - $('#content').width()) / 2) - 28;
26128 var offsetAfter = 0;
26129 var PerView = 3;
26130 var offset = 0;
26131 var space = 20;
26132 var SlidesPerGroup = 3;
26133 var _id = jQuery(this).parent().attr('id'); 26126 var _id = jQuery(this).parent().attr('id');
26134 if ($(window).width() < 600) {
26135 offset = 0;
26136 PerView = 1;
26137 SlidesPerGroup = 1;
26138 space = 0;
26139 offsetAfter = 0;
26140 }
26141 var swiper_params = { 26127 var swiper_params = {
26142 modules: [Navigation, Pagination, A11y, Keyboard], 26128 modules: [Navigation, Pagination, A11y, Keyboard],
26143 slidesPerView: PerView, 26129 slidesOffsetAfter: 0,
26144 slidesOffsetAfter: offsetAfter, 26130 slidesOffsetBefore: 0,
26145 slidesOffsetBefore: offset, 26131 spaceBetween: 30,
26146 spaceBetween: space,
26147 slidesPerGroup: SlidesPerGroup,
26148 // centeredSlides: true, 26132 // centeredSlides: true,
26149 loop: false, 26133 loop: false,
26150 lazy: true, 26134 lazy: true,
...@@ -26164,6 +26148,16 @@ ...@@ -26164,6 +26148,16 @@
26164 keyboard: { 26148 keyboard: {
26165 enabled: true, 26149 enabled: true,
26166 onlyInViewport: false 26150 onlyInViewport: false
26151 },
26152 breakpoints: {
26153 1073: {
26154 slidesPerView: 1,
26155 slidesPerGroup: 1
26156 },
26157 1074: {
26158 slidesPerView: 3,
26159 slidesPerGroup: 3
26160 }
26167 } 26161 }
26168 }; 26162 };
26169 new Swiper(this, swiper_params); 26163 new Swiper(this, swiper_params);
...@@ -26182,7 +26176,7 @@ ...@@ -26182,7 +26176,7 @@
26182 if (size == 2) { 26176 if (size == 2) {
26183 li += "<li class='article-card lg'><a href='" + post_obj['href'] + "'>"; 26177 li += "<li class='article-card lg'><a href='" + post_obj['href'] + "'>";
26184 if (post_obj['img_src']) { 26178 if (post_obj['img_src']) {
26185 li += "<div class='image-large'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div><div class='overlay'></div></div>"; 26179 li += "<div class='image large'><div class='scale-wrapper'><img src='" + post_obj['img_src'] + "' /></div><div class='overlay'></div></div>";
26186 } 26180 }
26187 if (post_obj['title'].length > 100) { 26181 if (post_obj['title'].length > 100) {
26188 li += "<div class='content reduce'><p>" + post_obj['title'] + "</p><span class='anchor-dots'></span></div>"; 26182 li += "<div class='content reduce'><p>" + post_obj['title'] + "</p><span class='anchor-dots'></span></div>";
......
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.
...@@ -17,35 +17,14 @@ jQuery(document).ready(function($) { ...@@ -17,35 +17,14 @@ jQuery(document).ready(function($) {
17 17
18 jQuery('.carousel-items').each(function() { 18 jQuery('.carousel-items').each(function() {
19 19
20 //var offset = ((window.innerWidth - $('#content').width()) / 2) - 28;
21 //var offsetAfter = ((window.innerWidth - $('#content').width()) / 2) - 28;
22 var offsetAfter = 0;
23 var PerView = 3
24 var offset =0;
25 var space = 20;
26 var SlidesPerGroup= 3;
27 20
28 var _id = jQuery(this).parent().attr('id'); 21 var _id = jQuery(this).parent().attr('id');
29 22
30
31 if ($(window).width() < 600) {
32 offset = 0;
33 PerView = 1;
34 SlidesPerGroup = 1;
35 space = 0;
36 offsetAfter = 0;
37
38 }
39
40
41
42 var swiper_params = { 23 var swiper_params = {
43 modules: [Navigation, Pagination, A11y, Keyboard], 24 modules: [Navigation, Pagination, A11y, Keyboard],
44 slidesPerView: PerView, 25 slidesOffsetAfter: 0,
45 slidesOffsetAfter: offsetAfter, 26 slidesOffsetBefore: 0,
46 slidesOffsetBefore: offset, 27 spaceBetween: 30,
47 spaceBetween: space,
48 slidesPerGroup: SlidesPerGroup ,
49 // centeredSlides: true, 28 // centeredSlides: true,
50 loop: false, 29 loop: false,
51 lazy: true, 30 lazy: true,
...@@ -68,6 +47,17 @@ jQuery(document).ready(function($) { ...@@ -68,6 +47,17 @@ jQuery(document).ready(function($) {
68 enabled: true, 47 enabled: true,
69 onlyInViewport: false, 48 onlyInViewport: false,
70 }, 49 },
50 breakpoints: {
51 1073: {
52 slidesPerView: 1,
53 slidesPerGroup: 1,
54 },
55 1074: {
56 slidesPerView: 3,
57 slidesPerGroup: 3,
58 },
59
60 },
71 61
72 }; 62 };
73 63
......
...@@ -7,7 +7,7 @@ function postItem(post_obj, size, sides, side_index, side_alternate, labels) { ...@@ -7,7 +7,7 @@ function postItem(post_obj, size, sides, side_index, side_alternate, labels) {
7 if(size == 2) { 7 if(size == 2) {
8 li += "<li class='article-card lg'><a href='"+post_obj['href']+"'>"; 8 li += "<li class='article-card lg'><a href='"+post_obj['href']+"'>";
9 if(post_obj['img_src']) { 9 if(post_obj['img_src']) {
10 li += "<div class='image-large'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div><div class='overlay'></div></div>"; 10 li += "<div class='image large'><div class='scale-wrapper'><img src='"+post_obj['img_src']+"' /></div><div class='overlay'></div></div>";
11 } 11 }
12 if(post_obj['title'].length > 100) { 12 if(post_obj['title'].length > 100) {
13 li += "<div class='content reduce'><p>"+post_obj['title']+"</p><span class='anchor-dots'></span></div>"; 13 li += "<div class='content reduce'><p>"+post_obj['title']+"</p><span class='anchor-dots'></span></div>";
......
...@@ -22,10 +22,13 @@ ...@@ -22,10 +22,13 @@
22 width: 110%; 22 width: 110%;
23 margin-top:24px; 23 margin-top:24px;
24 padding: 0rem 3.125rem; 24 padding: 0rem 3.125rem;
25 @media only screen and (max-width: 48.875rem) { 25
26 padding-right: 30px !important; 26 @media only screen and (max-width:67.063rem) {
27 //margin-right: -20px !important; 27 left: 0%;
28 width: 100vw;
29 padding: 0rem 0rem;
28 } 30 }
31
29 } 32 }
30 33
31 .carousel-items { 34 .carousel-items {
...@@ -44,19 +47,22 @@ ...@@ -44,19 +47,22 @@
44 .carousel-content{ 47 .carousel-content{
45 //padding: 0rem 3.125rem; 48 //padding: 0rem 3.125rem;
46 height: 260px; 49 height: 260px;
47 @media only screen and (max-width: 48.875rem) { 50
48 padding: 0rem 0.625rem;
49 }
50 } 51 }
51 .promo-image{ 52 .promo-image{
52 width: 340px; 53 width: 340px;
53 height: 186px; 54 height: 186px;
54 overflow: hidden; 55 overflow: hidden;
55 padding: 0px 4px; 56 padding: 0px 4px;
56 @media only screen and (max-width: 48.875rem) { 57
57 width: 100%; 58 @media only screen and (max-width:67.063rem) {
58 height: auto; 59 min-height: 186px!important;
60 max-height: 186px!important;
61 max-width: 340px;
62 min-width: 340px;
63
59 } 64 }
65
60 img{ 66 img{
61 width: 100%; 67 width: 100%;
62 } 68 }
...@@ -79,13 +85,7 @@ height: 260px; ...@@ -79,13 +85,7 @@ height: 260px;
79 font-size: 1rem; 85 font-size: 1rem;
80 line-height: 1.5rem; 86 line-height: 1.5rem;
81 text-align: left; 87 text-align: left;
82 @media only screen and (max-width: 48.875rem) { 88
83 margin-left: 0rem;
84 margin-top: 1.25rem;
85 font-size: 16px;
86 line-height: 1.5rem;
87 text-align: left;
88 }
89 } 89 }
90 .understrap-read-more-link{ 90 .understrap-read-more-link{
91 font-weight: bold; 91 font-weight: bold;
...@@ -118,7 +118,9 @@ height: 260px; ...@@ -118,7 +118,9 @@ height: 260px;
118 display: none; 118 display: none;
119 left: -15px !important; 119 left: -15px !important;
120 top:calc(50% - 1rem) !important; 120 top:calc(50% - 1rem) !important;
121 121 @media only screen and (max-width:67.063rem) {
122 display: none !important;
123 }
122 &:after{ 124 &:after{
123 content:"" !important; 125 content:"" !important;
124 width: 0.6875rem; 126 width: 0.6875rem;
...@@ -130,6 +132,9 @@ height: 260px; ...@@ -130,6 +132,9 @@ height: 260px;
130 position: absolute; 132 position: absolute;
131 top: 0.5rem; 133 top: 0.5rem;
132 left: 11px; 134 left: 11px;
135 @media only screen and (max-width:67.063rem) {
136 display: none;
137 }
133 } 138 }
134 139
135 } 140 }
...@@ -139,15 +144,15 @@ height: 260px; ...@@ -139,15 +144,15 @@ height: 260px;
139 144
140 right: 0rem !important; 145 right: 0rem !important;
141 top:calc(50% - 1rem) !important; 146 top:calc(50% - 1rem) !important;
142 @media only screen and (max-width:25rem) { 147
143 right: -0.625rem !important;
144 }
145 width:2.1875rem !important; 148 width:2.1875rem !important;
146 height:2.1875rem !important; 149 height:2.1875rem !important;
147 border: 0rem solid #EE0000; 150 border: 0rem solid #EE0000;
148 border-radius: 1.25rem; 151 border-radius: 1.25rem;
149 display: none; 152 display: none;
150 153 @media only screen and (max-width:67.063rem) {
154 display: none !important;
155 }
151 &:after{ 156 &:after{
152 content:"" !important; 157 content:"" !important;
153 width: 0.6875rem; 158 width: 0.6875rem;
...@@ -160,6 +165,9 @@ height: 260px; ...@@ -160,6 +165,9 @@ height: 260px;
160 position: absolute; 165 position: absolute;
161 top: 0.5rem; 166 top: 0.5rem;
162 left: 0.8125rem; 167 left: 0.8125rem;
168 @media only screen and (max-width:67.063rem) {
169 display: none;
170 }
163 } 171 }
164 172
165 } 173 }
...@@ -169,3 +177,18 @@ height: 260px; ...@@ -169,3 +177,18 @@ height: 260px;
169 background-color: #669999; 177 background-color: #669999;
170 } 178 }
171 179
180
181 .swiper-slide{
182 width: auto !important;
183 flex-shrink: 0;
184 display: block;
185 height: 100%;
186 max-height: 100%;
187 }
188
189 .swiper-wrapper{
190 max-height: 100%;
191 height: 100%;
192 display: flex;
193
194 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -179,6 +179,16 @@ ...@@ -179,6 +179,16 @@
179 padding-right:calc(50% - 5px); 179 padding-right:calc(50% - 5px);
180 padding-top: 31px; 180 padding-top: 31px;
181 padding-bottom: 20px; 181 padding-bottom: 20px;
182 @media only screen and (max-width: 48.875rem) {
183 margin-left: -50px;
184 margin-right: -50px;
185 padding-left:50px ;
186 padding-right:50px;
187 width: calc(100vw + 50px);
188 }
189 .wp-block-columns{
190 gap: 0em;
191 }
182 h2{ 192 h2{
183 color:#fff; 193 color:#fff;
184 font-size: 22px; 194 font-size: 22px;
......
...@@ -22,5 +22,5 @@ ...@@ -22,5 +22,5 @@
22 } 22 }
23 23
24 .admin-bar .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal{ 24 .admin-bar .wpml-ls-statics-shortcode_actions.wpml-ls.wpml-ls-legacy-list-horizontal{
25 top: 3px; 25 //top: 3px;
26 } 26 }
...\ No newline at end of file ...\ No newline at end of file
......
...@@ -639,6 +639,12 @@ ...@@ -639,6 +639,12 @@
639 padding: 0.9375rem 0.9375rem 0.9375rem 0.9375rem; 639 padding: 0.9375rem 0.9375rem 0.9375rem 0.9375rem;
640 width: 100%; 640 width: 100%;
641 } 641 }
642 @media only screen and (max-width: 62.5rem) {
643 #mega-menu-wrap-primary #mega-menu-primary li.mega-menu-megamenu > ul.mega-sub-menu > li.mega-menu-row .mega-menu-column > ul.mega-sub-menu > li.mega-menu-item {
644 padding:0px 0px 14px 28px;
645 margin-top: 0px !important;
646 }
647 }
642 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu { 648 #mega-menu-wrap-primary #mega-menu-primary > li.mega-menu-megamenu > ul.mega-sub-menu {
643 z-index: 999; 649 z-index: 999;
644 border-radius: 0; 650 border-radius: 0;
......
...@@ -183,7 +183,7 @@ ...@@ -183,7 +183,7 @@
183 display: inline-block; 183 display: inline-block;
184 position: absolute; 184 position: absolute;
185 top: 1.1rem; 185 top: 1.1rem;
186 right: 10px; 186 right: 20px;
187 transform: rotate(90deg); 187 transform: rotate(90deg);
188 188
189 } 189 }
...@@ -237,7 +237,7 @@ ...@@ -237,7 +237,7 @@
237 margin: 0.625rem auto 0rem auto; 237 margin: 0.625rem auto 0rem auto;
238 color:#fff; 238 color:#fff;
239 background-color: #EE0000; 239 background-color: #EE0000;
240 border-radius: 1.25rem; 240 border-radius: 20px;
241 text-align: left; 241 text-align: left;
242 height: 2.5rem; 242 height: 2.5rem;
243 margin-top: 0rem; 243 margin-top: 0rem;
...@@ -363,6 +363,7 @@ ...@@ -363,6 +363,7 @@
363 font-style: normal !important; 363 font-style: normal !important;
364 font-size:1rem !important;; 364 font-size:1rem !important;;
365 line-height: 1.25rem !important;; 365 line-height: 1.25rem !important;;
366 display: none !important
366 } 367 }
367 368
368 .list-wrapper3 .mega-sub-menu .mega-menu-item a{ 369 .list-wrapper3 .mega-sub-menu .mega-menu-item a{
...@@ -383,11 +384,11 @@ ...@@ -383,11 +384,11 @@
383 384
384 #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-3:after{ 385 #mega-menu-wrap-primary .mega-menu-toggle.mega-menu-open .mega-toggle-block-3:after{
385 content: "\00d7"; 386 content: "\00d7";
386 font-size: 2.125rem; 387 font-size: 1.8rem;
387 font-weight: bold; 388 font-weight: 700;
388 color: #fff; 389 color: #fff;
389 margin: 0 0 0 0.525rem; 390 margin: 0 0 0 0.6rem;
390 line-height: 1.2625rem; 391 line-height: 1.3625rem;
391 } 392 }
392 #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-3:after { 393 #mega-menu-wrap-primary .mega-menu-toggle .mega-toggle-block-3:after {
393 content: "\f333"; 394 content: "\f333";
......
...@@ -4,7 +4,9 @@ ...@@ -4,7 +4,9 @@
4 flex-wrap: wrap; 4 flex-wrap: wrap;
5 justify-content: center; 5 justify-content: center;
6 margin:24px 0; 6 margin:24px 0;
7 7 @media only screen and (max-width:67.063rem) {
8 display: block;
9 }
8 .post-list-left-col { 10 .post-list-left-col {
9 flex-basis: 50%; 11 flex-basis: 50%;
10 display: flex; 12 display: flex;
...@@ -25,6 +27,10 @@ ...@@ -25,6 +27,10 @@
25 padding:0; 27 padding:0;
26 margin:0; 28 margin:0;
27 gap: 12px; 29 gap: 12px;
30 @media only screen and (max-width: 67.063rem) {
31 flex-direction: row;
32 padding-left: 0px !important;
33 }
28 .article-card { 34 .article-card {
29 min-height: 117px; 35 min-height: 117px;
30 // max-height: 8.438rem; 36 // max-height: 8.438rem;
...@@ -34,10 +40,11 @@ ...@@ -34,10 +40,11 @@
34 text-decoration: none; 40 text-decoration: none;
35 } 41 }
36 &.lg { 42 &.lg {
37 43 @media only screen and (min-width: 67.063rem) {
38 min-height: 28rem; 44 min-height: 28rem;
39 max-height: 28rem; 45 max-height: 28rem;
40 .image-large{ 46 }
47 .image.large{
41 position: relative; 48 position: relative;
42 } 49 }
43 .overlay{ 50 .overlay{
...@@ -112,6 +119,7 @@ ...@@ -112,6 +119,7 @@
112 max-width: 31rem; 119 max-width: 31rem;
113 min-width: 31rem; 120 min-width: 31rem;
114 min-height: 8.438rem; 121 min-height: 8.438rem;
122 margin-right: 30px;
115 a { 123 a {
116 color:white; 124 color:white;
117 gap: 1.625rem; 125 gap: 1.625rem;
...@@ -197,15 +205,18 @@ ...@@ -197,15 +205,18 @@
197 width: 100%; 205 width: 100%;
198 margin-top:0.938rem; 206 margin-top:0.938rem;
199 } 207 }
200 .image { 208 .image:not(.large) {
209 @media only screen and (min-width: 67.063rem) {
201 flex-basis: 40%; 210 flex-basis: 40%;
202 min-width: 214px; 211 min-width: 214px;
203 max-width: 214px; 212 max-width: 214px;
204 min-height: 117px; 213 min-height: 117px;
205 max-height: 117px; 214 max-height: 117px;
215 }
206 object-fit: cover; 216 object-fit: cover;
207 overflow: hidden; 217 overflow: hidden;
208 position: relative; 218 position: relative;
219
209 img { 220 img {
210 object-fit: cover; 221 object-fit: cover;
211 height: 100%; 222 height: 100%;
...@@ -250,6 +261,50 @@ ...@@ -250,6 +261,50 @@
250 } 261 }
251 262
252 263
264
253 .mobile-article-list { 265 .mobile-article-list {
254 display: none; 266 display: none;
255 } 267 }
268
269 @media only screen and (max-width: 67.063rem) {
270 .post-list-right-col,
271 .post-list-left-col{
272 display: none !important;
273 }
274 .mobile-article-list {
275 display:block;
276 overflow: scroll;
277
278 }
279 .mobile-article-list{
280 pointer-events: auto;
281 position: relative;
282 overflow: scroll;
283 width: 100vw;
284 ul{
285 flex-wrap: nowrap;
286 width: 1800px;
287 }
288 .sm,
289 .lg{
290 max-width: 340px ;
291 min-width: 340px ;
292 .image{
293 position: relative;
294 min-height: 186px;
295 max-height: 186px;
296 }
297 .scale-wrapper{
298 min-height: 186px !important;
299 max-height: 186px !important;
300 overflow: hidden;
301 position: relative;
302
303 }
304 a{
305 flex-direction: column;
306 height: 100%;
307 }
308 }
309 }
310 }
......