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

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 4 months, 3 weeks ago by Jak73.

Hi Guenni,
i just removed it.

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

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

I just set them all to individual height.

• This reply was modified 4 months, 3 weeks ago by Jak73.

Hi Guenni,
looks really great now. Thank you very much!
The horizontal images with the space above are perfect. The size of them is 340x269px (width and height).

I still have an issue with the image sizes of the vertical images. They have been added with an individual image size of 269x340px (width and height) , But for any reason they are shown much larger. How can i adjust them to 269x340px (width and height)?
I would also like to remove the space above them (only on the vertical images (please see screenshot, how it should look).

Screenshot: https://img.savvyify.com/images/2024/07/02/images-size-vertical-and-spacinge0656b6e503bd7bf.jpg

kind regards and many thanks
Jak

It works for the first image. The other take an effect, but don’t look same?

I think i got it.

I added texblock elements and the css of your demo on my page (the last one i send you with email), but it seems the css is not effecting it?

BTW is it possible to change the image size from the given medium 300 x 237 to custom size 340 x 269px (horizontal and 269 x 340px for vertical?
Wordspress reduces the image files and i can’t see an option for individual sizing

Hi Guenni,
i added the css to quick css, added a 1/2 column and added an image with caption in there. But it seems i’m missing something?

Hi Guenni, how can i realize this?

Hi,
sure, i just uploaded the screenshot, which shows, how it should look like on Savvyify.
Please see private Content box.
kind regards
Jak

Hi Rikard,

i had to change it again and can’t find a solution?

I added some columns. The Columns should all have the same size.
All my images will be in a vertical-format or horizontal-format.
They will all have the same size (only difference is horizontal and vertical format.

The columns should be as height as the vertical images (for all images. also for the horizontal-images the columns should have the same height, as for the vertical images).

Next thing is, that i would like to add some space between the images and the text.

Please see screenshot as an example, what i’m trying to do.

kind regards
Jak