-
AuthorPosts
-
July 2, 2024 at 4:43 pm #1461063
set on first try that second column row to not show as equal height.
July 2, 2024 at 4:51 pm #1461065I just set them all to individual height.
- This reply was modified 4 months, 3 weeks ago by Jak73.
July 2, 2024 at 7:10 pm #1461088try to change that one rule to:
(it is only that line changed: grid-template-columns: auto 1fr; )
#top .avia_textblock.img-with-caption-right .wp-caption { border: 1px solid #cccccc; width: 100% !important; margin: 0; display: grid; grid-auto-rows: auto; grid-template-columns: auto 1fr; grid-template-areas: "feld2 feld1"; align-items: flex-end; }
July 2, 2024 at 7:15 pm #1461092That worked very well. The images are correct size now. Thank you!
The space above Portrait images is still there.July 2, 2024 at 7:58 pm #1461099ok –
put this to your child-theme functions.php:
(try if the window on load is neccessary)function set_class_for_image_orientation(){ ?> <script> (function($) { $(window).on('load', function(){ var images = document.getElementsByTagName('img'); for( var i=0; i<images.length;i++){ if(images[i].naturalWidth > images[i].naturalHeight) { $(images[i]).addClass('landscape'); } else if (images[i].naturalWidth < images[i].naturalHeight) { $(images[i]).addClass('portrait'); } else { $(images[i]).addClass('square-image'); } } }); })(jQuery); </script> <?php } add_action('wp_footer', 'set_class_for_image_orientation');
now every image got a class on img that belongs to its orientation
then place that code to your quick css:
#top .avia_textblock.img-with-caption-right .wp-caption img.portrait { margin-top: 0 }
and perhaps you like to go back to the same width if responsive case (smaller than 767px)
@media only screen and (max-width: 767px) { #top .avia_textblock.img-with-caption-right .wp-caption { grid-template-columns: 1fr 1fr; } }
July 2, 2024 at 10:22 pm #1461120Hi Guenni,
this is really perfect!!! Thank you so much for your help!!!
kind regards
JakJuly 2, 2024 at 10:41 pm #1461123Hi,
Glad Guenni007 could help, thank you Guenni007, shall we close this thread then?Best regards,
MikeJuly 2, 2024 at 10:58 pm #1461128Hi Mike,
please leave it open, because i just saw, that there is a strange behavior:When the browser window is reduced in size, the frames marked in orange and the contained images become disproportional smaller. The other frames (and their images) adjust in proportion.
How can I change this so that all frames and images behave the same when they are displayed smaller?
Please see screenshot: https://img.savvyify.com/images/2024/07/02/strange-behavior-works-while-reducing-width9efbcb04edcfc548.jpgkind regards Jak
July 3, 2024 at 12:04 am #1461135you could go and set that one rule for non responsive case :
(grid-template-columns: 35% 65%;)#top .avia_textblock.img-with-caption-right .wp-caption { border: 1px solid #cccccc; width: 100% !important; margin: 0; display: grid; grid-auto-rows: auto; grid-template-columns: 35% 65%; grid-template-areas: "feld2 feld1"; align-items: flex-end; overflow: hidden; }
But you had to manually insert softhyphens to some of your titles.
By the way: Self Contained and on the one image Selfcontained ?It is difficult to fulfill all your requirements because the preconditions are of course not identical. Different image formats and aspect ratios paired with titles of different lengths.
July 3, 2024 at 12:07 am #1461136PS: have a look where this rule is:
@media only screen and (min-width: 990px) and (max-width: 1051px) { #top .avia_textblock.img-with-caption-right .wp-caption { grid-template-columns: 1fr; grid-template-areas: "feld2 " "feld1 " undefined!importantundefined; } }
remove it please. then we can have a look how to style the responsive cases in between 768 and 989
and replace the script with that from: https://kriesi.at/support/topic/remove-bottom-space-from-colum-and-place-text-right-to-image-how-to-reduce-spa/page/2/#post-1461099
July 3, 2024 at 8:55 am #1461176Hi Guenni,
i just removed it.July 3, 2024 at 9:51 am #1461180Would it make sense to create additional text blocks for the responsive version (with a smaller font and smaller images) in order to avoid the changed proportions with a smaller display?
Then provide the new text blocks with the respective responsive settings?July 3, 2024 at 11:37 am #1461187if you see this page – that has your initial setting with text-blocks in columns (equal height ) – images floating left and text directly behind it.
But you see on last column row – that with equal height option the space to top is much bigger than on the other images besides other landscape images.https://webers-testseite.de/jak73/
Password: is the last name of that logo ( capitalize )
July 3, 2024 at 11:39 am #1461188please replace the snippet in functions.php.
It seems to be neccessary to have window on load.July 3, 2024 at 1:06 pm #1461201Hi Guenni,
i will do that now. Sould i keep or delete:/**** Feld Definitionen ********/ #top .avia_textblock.img-with-caption-right .wp-caption .wp-caption-text { grid-area: feld1 } /*** depends on if there is a link on the image or not ****/ #top .avia_textblock.img-with-caption-right .wp-caption > *:first-child { grid-area: feld2 } #top .avia_textblock.img-with-caption-right .wp-caption { border: 1px solid #cccccc; width: 100% !important; margin: 0; display: grid; grid-auto-rows: auto; grid-template-columns: 1fr 1fr; grid-template-areas: "feld2 feld1"; align-items: flex-end; } #top .avia_textblock.img-with-caption-right .wp-caption img { padding: 0 !important; } #top .avia_textblock.img-with-caption-right .wp-caption .wp-caption-text { display: block ; color: #222222; font-style: normal; font-size: 18px; font-family: inherit; width: 100%; padding: 0 1em; text-align: left; } .avia_textblock.img-with-caption-right .wp-caption .wp-caption-text p { margin: 0 !important; } /*** Abstang über dem Rahmen ******/ #top .avia_textblock.img-with-caption-right .wp-caption img { margin-top: 70px } /**** for responsive case maybe:*****/ @media only screen and (min-width: 990px) and (max-width: 1051px) { #top .avia_textblock.img-with-caption-right .wp-caption { grid-template-columns: 1fr; grid-template-areas: "feld2" "feld1" !important; } }
for css or just add your new css?
kind regards
Jak- This reply was modified 4 months, 3 weeks ago by Jak73.
July 3, 2024 at 1:33 pm #1461206Hi Guenni,
i just added it under a new page, which is called: /test2/
It looks like the images keeping th correct proportions now.
But it seems, that i missed somthing. Does not have the same behavior like on your demo site?I can proberbly remove the old css, because it was for the other way, right?
kind regards Jak- This reply was modified 4 months, 3 weeks ago by Jak73.
July 3, 2024 at 2:01 pm #1461210if you like to hold that solution – you can erase that code. ( it is based on a different custom class. )
hold the img-with-caption and blue-info css !on inserting the images to the text-block – i edited the images – and gave them all the same width (250px)
Next: It might be best to switch to responsive design on 989px ( even for your menu too )
July 3, 2024 at 3:22 pm #1461228Hi Guenni,
i added your css and it looks very good in desktop resolution for large screen.
I added smaller images for resolutions below 989px.
The issue i’m facing is, that, when i shrink the browser width, some text goes out of the border.
Is there a workaround, so that the images should be staying allways in the same proportions and everything shrinks with same proportions, when the browser window gets reduced in width?I also saw, that the last image has too much space above (only that one. i checked if there was some wrong settings, but i can’t find something wrong?
https://img.savvyify.com/images/2024/07/03/space-above-last-image.jpg
kind regards Jak
July 5, 2024 at 10:37 am #1461433Hi Guenni, i followed your instruction again with image with caption right.
Works now perfectly (i had to use a workaround and changed the images to square form).
Thanks again for your help!
kind regards
JakJuly 6, 2024 at 11:58 am #1461476Hi,
Glad Guenni007 could help, thank you Guenni007, shall we close this thread then?Best regards,
MikeJuly 6, 2024 at 12:11 pm #1461477Hi Mike,
yes, thank you.
kind regards
Jak -
AuthorPosts
- The topic ‘Remove bottom space from colum and place text right to image / how to reduce spa’ is closed to new replies.