Hi Ismael,
this is, what i was looking for, thank you!

How can i add my own symbols in the buttons (please see private content) and how can i give them a specific size?.

Where should i put the links for navigation into the code?

kind regards
Jak

Hi Mike,
this is really nice, thank you!

Is it possible to add a border to the top and bottom, like on the screenshot (1px solid #000)?

kind regards
Jak

Hi Rikard,
this helped a lot, thank you!
There is still a part, when the witdh of browser gets reduced, where the space above the spacial heading gets to big for some reason (please see screenshot).
kind regards
Jak

Hi Guenni,
yes that’s right, same page.
I’ll try that. Thank you!
kind regards Jak

Vielen Dank Guenni, das ist sehr hilfreich!
kind regards
Jak

Got it.
kind regards Jak

• This reply was modified 9 months ago by Jak73.
• This reply was modified 9 months ago by Jak73.

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 9 months ago by Jak73.