home-big-thumbnal on mobile

js/scripts.js

@@ -911,7 +911,7 @@
 					//hide metadata
 					cMetadata.children(".categories, .postedon").hide().removeClass("transparent")
 					cBevezetoWrapper.show()
-					cAlcimWrapper.css({ display: 'flex' })
+					cAlcimWrapper.css({ display: 'flex' }).addClass("transparent")
 
 					//set height for ellipsis
 					if (!cc.attr('data-metadataBevezetoHeight')) {
@@ -922,13 +922,18 @@
 							width: bWidth + 'px'
 						})
 						cAlcim.css({
-							height:metadataBevezetoHeight,
+							height: metadataBevezetoHeight,
 						})
 						cc.attr('data-metadataBevezetoHeight', metadataBevezetoHeight)
 					}
-					
+
 					//show bev+alcim
-					cMetadata.children(".bevezetoWrapper, .alcimWrapper").removeClass("transparent")
+					cBevezetoWrapper.removeClass("transparent")
+
+					//only show alcim, if enough space
+					if (!(cAlcim.children('.alcimInner').height() > cAlcim.height())) {
+						cAlcimWrapper.removeClass("transparent")
+					}
 
 					//clamp bevezető
 					let ellipsis = new Ellipsis(cBevezeto[0]);

sass/base.scss

@@ -1871,6 +1871,11 @@ $padd: 2rem;
       padding: 0;
 
       img.attachment-single-thumbnail {
+        //use home-big-thumbnail on mobile
+        display: none;
+      }
+
+      img.attachment-home-big-thumbnail {
         // post thumbnail on home
         height: 75vh;
         width: 100vw;
@@ -1972,9 +1977,13 @@ $padd: 2rem;
         bottom: 0;
         width: 100%;
 
+        img.attachment-home-big-thumbnail {
+          display: none;
+        }
+
         img.attachment-single-thumbnail {
           // post thumbnail on home
-
+          display: block;
           object-fit: cover;
           padding: 0;
 

singular.php

@@ -13,6 +13,7 @@
 				<?php if (has_post_thumbnail()): // Check if Thumbnail exists ?>
 					<div class="thumbnailwrapper">
 						<?php the_post_thumbnail('single-thumbnail'); ?>
+						<?php the_post_thumbnail('home-big-thumbnail'); ?>
 					</div>
 
 				<?php endif;?>