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 5 months, 2 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/

Warum denkst du so kompliziert?
Warum machst du nicht ganz normal 1/2 columns und setzt jeweils dort ein Text-block hinein. Das bild kannst du dort im Text-Block auch als links – bzw. rechtsbündig setzen.
Ist auch für das responsiv verhalten wesentlich leichter zu handhaben. Versuch doch mal durchzuspielen, wie dein Layout – speziell die Bilder reagieren sollen bei schmalen Screens!
PS: komplexe layouts kann man mit dem Grid Layout erstellen – aber wie gesagt – warum kompliziert wenn es auch einfacher geht.
__________

Why don’t you just make 1/2 columns as normal and put a text block in each. You can also set the image in the text block to be left-aligned or right-aligned. It is also much easier to manage for responsive behaviour. Try playing around with how your layout – especially the images – should react on narrow screens!

PS: complex layouts can be created with the Grid Layout – but as I said, why make it complicated when it can be simpler?

see: https://webers-testseite.de/grid-layout-modul/
PPS: die Felder müssen nicht immer definiert werden, aber man kann dann sehr (sehr) flexibel die Zellen im responsiven Fall behandeln.

so it is not a second menu meant but a different one ?