Thanks a lot. I was able to create quite a bit of additional css code thanks to these posts, but I have one small problem remaining:
I curently use the follwing code for the banner-image size:

@media screen and (min-width: 1600px) {
/* changes the width of a page and picture*/
body.single-post #page {
max-width: 70%;
}
#banner-image {
padding-bottom: 20%;
}
}

/* Mobile Style Sheet */
@media only screen and (max-width: 1000px) {
body.single-post #page {
max-width: 100%;
}
}

This results in the picture looking like this. As you can see the box doesnt align with the banner end anymore. How can I fix this?

I tried adding following CSS code in the respectiv section but it hasnt worked sofar:

#wrapper {
padding-bottom: 20%;
}

Thanks a lot in advance
Regards!

Thanks a lot. Your help is relly appreciated.

Well you advised me to change the max-width of a post to show the whole (featured image). This did work well for a big computer screens . But for a smaller computer screens and phone screen It did not work as intended. So I guess my question is:

Is it possible to show the the whole picture (or close too) on (big) computer screens, while keeping the max-width at 100%?
I’m guessing this could be achieved by somehow extending the max-height of the picutre?

I hope this clarified it a bit
Thanks a lot in advance

Thanks a lot, this solved all my problems.
One last question though:
Is there an easy way to make the posts in your Popular Destination feature the same size? I kinda dislike the white space that exist in the normal way.
Regards!