Viewing 19 posts - 31 through 49 (of 49 total)
  • Author
    Posts
  • #1461063

    set on first try that second column row to not show as equal height.

    #1461065

    I just set them all to individual height.

    • This reply was modified 3 days, 2 hours ago by Jak73.
    #1461088

    try 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;
    }
    #1461092

    That worked very well. The images are correct size now. Thank you!
    The space above Portrait images is still there.

    #1461099

    ok –
    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;
      }
    }
    #1461120

    Hi Guenni,
    this is really perfect!!! Thank you so much for your help!!!
    kind regards
    Jak

    #1461123

    Hi,
    Glad Guenni007 could help, thank you Guenni007, shall we close this thread then?

    Best regards,
    Mike

    #1461128

    Hi 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.jpg

    kind regards Jak

    #1461135

    you 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.

    #1461136

    PS: 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

    #1461176

    Hi Guenni,
    i just removed it.

    #1461180

    Would 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?

    #1461187

    if 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 )

    #1461188

    please replace the snippet in functions.php.
    It seems to be neccessary to have window on load.

    #1461201

    Hi 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 2 days, 5 hours ago by Jak73.
    #1461206

    Hi 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 2 days, 5 hours ago by Jak73.
    #1461210

    if 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 )

    #1461228

    Hi 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

    #1461433

    Hi 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
    Jak

Viewing 19 posts - 31 through 49 (of 49 total)
  • You must be logged in to reply to this topic.