or use normal html details / summary:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_details

<details>
<summary>read more …</summary>
 <p>Epcot is a theme park at Walt Disney World Resort featuring exciting attractions, international pavilions, award-winning fireworks and seasonal special events.</p>
</details>

PS : there are some ways to animate that details use.

Also mit dem iframe popup modus geht es:
https://webers-testseite.de/gallery-with-8-images/

wenn es das ist was gewünscht ist? dann kann ich das nochmal genauer beschreiben.
PS: die Einblendanimation muss allerdings als css hinzugefügt werden. Das war bei mir schon drin.

das hier: $('#header, #footer, #socket, .sidebar').hide();
blendet auf der Portfolio Seite dann alles aus was ich nicht im iframe haben möchte.

Da deine Seite ja auch auf deutsch ist, antworte ich mal auch auf deutsch.
Du hast ja hier eine Verlinkung zu einem Portfolio jeweils. Das heißt du lenkst zu einer Infoseite bezüglich dieses Beitragsbildes um.
Dort könntest Du so eine Bildergalerie anlegen, die genau das hat was Du haben möchtest. Diese Option ist aber nur bei der Bildergalerie gegeben.
Siehe unter Stil Tab – Galerie Stil ” Nur großes Bild – andere Bilder über Lightbox …”
Siehe z.B: https://webers-testseite.de/gallery-with-8-images/
was man jetzt machen könnte, wäre es so zu lassen, und auf den Portfolioseiten so eine Galerie einrichten. Die könnte man per script beim Laden öffnen lassen.

I’m afraid it won’t be that easy without a child-theme postslider.php. The category metas are part of entry-content-header – the rest of the meta info is in slide-meta.
With javascript you can move it there afterwards, but the method of placing it there when it is created would certainly be more elegant.

one thing to mention: the pseudo containers ( before and after ) are part of : entry-content-wrapper
if you handle that container as flex-container they will be part of all definitions.

so i do set them to display:none on that case.
next: i do not work with width setting – on the contrary – I set the column widths to unset ( these columns are the items of the flex-containers.)
next: do not use the equal height option – this could be done bei flex-box layout – and those added containers will be part too of the flex-box.

see here an example page including the css code for it. You see all items will have the same height!

https://webers-testseite.de/flexed/

PS : eventuell postet du mal den Link zu deiner Seite – dann schaue ich mir das näher an.

i have this solution with complete replacement of all menu files in my child-theme shortcodes folder.
All files – because there are in original css rules with !important setting. This is something you could not overwrite with other css.
And inside the js file we had to set a different calculation. Especially the case: if( burger_menu.is(“:visible”) ) had to be set in a different way.

See example page: https://webers-testseite.de/transparent-header/

here are the edited menu files: https://webers-testseite.de/menu.zip

on that testpage – there are two submenus – and it works with full-menu or with second hamburger ( test under 479px)

give to the link or to one of its parents the custom class: noLightbox
( pay attention it is case-sensitive)

next hint: if you got a button and you installed the latest version – the “Link Setttings and Filedownload” indicates the option of button type:
“File Download Button”
in this case on an image – it will be not shown but directly downloaded.

PS : if you only dislike the overlay – you can have lightbox without that by:

.avia_transform a:hover .image-overlay {
  display: none !important;
}

the point is that on emulators ( developer tools of all my desktop browsers ) your mobile menu is sticky and fullwidth on screen width less than 767px.

But on a real mobile device, the header scrolls out of the screen.

It is hard to check – because on most cases – the css rules to make are built with dev tools.

…

First: Do you really need all of them. Fontloading is something that could reduce performance of your website.
Next: My advice is not to use the variable Font that is inside the TypeType CommonsPro folder too – it has all the font-faces that are inside that folder and a file size of 1.8MB
if you can live with light, regualar and bold – i would only take the non italic fonts and upload them to transfonter

the convert as shown above and download it – rename the zip file to f.e.: Commons-Pro

Edit

This is a strange professional font. Normally it always works right away to generate the zip file as a font family. In this case – I first had to open the files in FontLab and have the names (postscript names) regenerated there by Build Names. I then saved these as otf families and uploaded them to Tranfonter.

Now you can see it is ok:

test yourself with: https://webers-testseite.de/commons-pro.zip

Please note, however, that your licensing model must include web font use.

Because you are using it without content (only a background image is inside the grid cell). A quick solution could be to place a separator as a white space in this cell. This allows you to determine the height after switching to the responsive view.

last attempt – calculation with the given paddings is hard to fullfill – so try on that page without:
(To avoid incorrect values for the normal videos (landscape mode), set these values only for the corresponding page.
(Unfortunately, a custom class is not passed to the main class of mfp-wrap. You could do this for an inline popup.)

.mfp-iframe-holder {
  padding: 0px !important; 
}

.mfp-iframe-holder .mfp-content {
  height: 90vh !important;  /*** the wanted height ***/
  width: 50.625vh;  /*** the calculated width is then ***/
}

.mfp-iframe-scaler {
  padding-top: 178%;  /*** 100 x 16 / 9 = 177.88 ***/
}

see again: https://webers-testseite.de/portrait-video/

maybe you try this only:
(if you got a real 9/16 video)

.mfp-iframe-holder .mfp-content {
  width: 50vh !important;
}

.mfp-iframe-scaler {
  padding-top: calc(158% + 80px);
}

if the video has a width of 50vh – then it has a height of 89vh ( so enough space for close button ). However, with a padding top this means: 89×16/9 = 158

see: https://webers-testseite.de/portrait-video/

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

if you only want to link from the picture to one side once, it is difficult to implement.
Some of the elements (Masonry Gallery, Gallery ) have the option: under ‘Advanced Tab’ – Image Link : ‘use custom link – fallback is image’. However, the value entered is then entered globally under the image. So if you only want to set the link to a page in one of the galleries, you have to upload a copy of the image.

this technique is called : infinite scroll – maybe that older post can help you on that:
https://kriesi.at/support/topic/quick-way-to-add-infinite-scroll/#post-681490

Edit: it still works.
Download that little script: https://jscroll.com/#/installation
and upload it to your child-theme js folder ( if there is none – create that child-theme subfolder )

I load the script only for my test page (ID: 45777)
put this to your child-theme functions.php:

function my_custom_infinite_scoll() {
    if ( is_page(45777) ) {
        wp_enqueue_script( 'avia-child-jscroll', get_stylesheet_directory_uri().'/js/jscroll.min.js', array('jquery'), 2, true );
    }
} 
add_action('wp_enqueue_scripts', 'my_custom_infinite_scoll');

and

function infinite_scroll() {
if ( is_page(45777) ) {
?>
<script type="text/javascript">
(function($) {
$( ".content" ).jscroll({
	loadingHtml: '<img src="/wp-content/uploads/anim-world.gif" alt="Loading" /> Loading...',
	nextSelector: 'span.current + a',
	contentSelector: '.article-grid',
	autoTrigger: true,
});

})(jQuery);
</script>
<?php
}
}
add_action('wp_footer', 'infinite_scroll', 999);

In my case it is a blog element – give that custom class: article-grid to that element.
Read the setting carefully ( with pagination – this nav is set to display none via css )

see: https://webers-testseite.de/infinite-scroll/