Translating in Media Library – for me – it is comfortable enough. In Media Library Grid View – Open one Image – so you can see the attachment details – enter your Titles – Descriptions etc. – go to the next by those arrows on top right.

After that – switch language in admin bar – and do the translations.

PS : page is moved to : https://pureinstall.webers-testseite.de/dot-navigation-with-colored-sections/

I haven’t used this myself yet, so I can’t say anything about its usability.
i thought that the media translation add-on is for that. – I think I need to create a test environment.

I just did the translation of a page with gallery. I have finished the primary language first. Then I used “Duplicate” to make the German translation; I had set the two checkmarks at “Media Attachments”. –
Then I can load the page in German into the editor, and call the gallery there again. And for each picture the translation work in.
So i did not use the translation manager – but only open the translated copy of the original language – then open the gallery again and fill in the captions the translation.:

https://carpe.webers-testseite.de/testpage/

probably you will be able to do the translations inside the Media Library as well. Above you have the currently activated language! Here in the picture British English.

You can now click on the images in the Grid View and edit them one by one. After that switch the language above – and then add the translations again.

have a look to this post:
https://kriesi.at/support/topic/dynamically-change-number-of-columns-in-post-slider/#post-1377717

this is similar for your blog

to stay specific only to this page ( your blog page ) we can try to set the conditional tag is_archive
(if it does not work with this conditional we had to find a better conditional)
this to your child-theme functions.php:

function wrap_articles_in_one_flex_container(){ 
if(is_archive()){
?>
<script type="text/javascript">
window.addEventListener("DOMContentLoaded", function () { 
  (function($) {
    $('.avia-content-slider-inner .slide-entry-wrap .slide-entry').each( function() {
        $(this).detach().appendTo('.avia-content-slider-inner .slide-entry-wrap:first');
    });
    $('.avia-content-slider-inner .slide-entry-wrap:empty').remove();
  })(jQuery);
});
</script>
<?php
}
}
add_action('wp_footer', 'wrap_articles_in_one_flex_container');

this collects all articles into one wrapper – only this way it is possible that the whole container can react responsively.
now the css to quick css:

#top.category-blog .avia-content-slider .slide-entry-wrap {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-between;
}

#top.category-blog .avia-content-slider .slide-entry-wrap .slide-entry {
  flex: 0 1 calc(33% - 30px);
  margin: 0 15px 30px;
  width: unset;
  max-width: unset;
}

@media only screen and (max-width:989px) {
  #top.category-blog .avia-content-slider .slide-entry-wrap .slide-entry {
    flex: 0 1 calc(50% - 10px);
    margin: 0 0 30px !important;
  }
}

@media only screen and (max-width:767px) {
  #top.category-blog .avia-content-slider .slide-entry-wrap .slide-entry {
    flex: 1 1 100%;
    margin: 0 0 30px !important;
  }
}

But you had to switch off the pagination

here is the kriesi double button: https://webers-testseite.de/doublebutton/

this is the html code for it:

<div class="avia-double-buttons ">
	<a href="https://link1" class="avia-double-button avia-double-button-1">Text1</a>
	<span class="button_or">or</span>
	<a href="https://link2" class="avia-double-button avia-double-button-2">Text2</a>
</div>

this was the original css for it:

.avia-double-buttons {
 margin-top:30px;
 text-align:center;
 position:relative
}
#top .avia-double-button {
 letter-spacing:1px;
 padding:13px 20px;
 text-transform:uppercase;
 font-size:13px;
 text-align:center;
 min-width:175px;
 display:inline-block;
 transition:all 0.4s ease-in-out;
 -moz-transition:all 0.4s ease-in-out;
 -webkit-transition:all 0.4s ease-in-out;
 -o-transition:all 0.4s ease-in-out;
 border:4px solid #fff;
 text-decoration:none
}
#top .av_one_half .avia-double-button {
 min-width:158px
}
#top .avia-double-button:hover {
 text-decoration:none
}
#top .avia-double-button-1 {
 border-top-left-radius:100px;
 border-bottom-left-radius:100px;
 border-right-width:2px
}
#top .avia-double-button-2 {
 border-top-right-radius:100px;
 border-bottom-right-radius:100px;
 border-left:none
}
#top .button_or {
 position:absolute;
 display:block;
 height:26px;
 line-height:21px;
 width:26px;
 text-align:center;
 top:50%;
 left:50%;
 margin:-13px 0 0 -14px;
 background:#fff;
 color:#666;
 border-radius:100px;
 font-size:10px;
 border:2px solid #FFF;
 font-style:italic;
 font-weight:600;
 z-index:11
}
#top #wrap_all .avia-slide-wrap .avia-double-button,
#top #wrap_all .avia-hover-fx .avia-double-button {
 background:#000;
 background:rgba(0,0,0,0.2);
 border-color:#fff;
 color:#fff;
 padding-bottom:11px;
 text-decoration:none
}
#top #wrap_all .avia-slide-wrap .avia-double-button:hover,
#top #wrap_all .avia-hover-fx .avia-double-button:hover {
 opacity:0.8
}
#top .avia_textblock .avia-double-buttons {
 margin-top:35px
}
#top .avia_textblock .avia-double-button {
 border-width:1px;
 font-weight:600
}
#top .avia_textblock .button_or {
 border-color:#e1e1e1;
 border-width:1px;
 line-height:22px
}
#top .avia-social-buttons {
 display:block;
 clear:both;
 position:relative;
 padding:8px;
 border-radius:50px;
 background:#fcfcfc;
 margin-bottom:-47px;
 margin-left:auto;
 top:21px;
 text-align:center;
 margin-right:auto;
 width:468px;
 box-shadow:0 -1px 2px rgb(255,255,255),inset 0 1px 2px rgba(0,0,0,.2),inset 0 .25rem 1rem rgba(0,0,0,.1)
}

here are some customizations on enfold Buttons: https://enfold.webers-webdesign.de/buttons/

______________

btw: for better selecting Buttons in a button-row i had written that little snippet to have unique ID’s on each Button:

function id_to_button_row_buttons(){
?>
<script>
(function($) {
  $('.avia-buttonrow-wrap').each(function(a){
    var ButtonRowID = ($(this).attr('id') !== undefined) ? $(this).attr('id') : 'button_row'+(a+1);
    var that = this;
    $('.avia-button', this).each(function(i){
      $(this).attr('id', ButtonRowID+'-button'+(i+1));
    });
  });
})(jQuery);
</script>
<?php
}
add_action( 'wp_footer', 'id_to_button_row_buttons');

you can see here in the DOM how it works ( first button row has no custom class – second got abc as custom-class.)
https://webers-testseite.de/buttonrow/

i’m participant as you are – so if there is a private content link – i can not see.
but you can try:

.mfp-inline-holder .mfp-content, 
.mfp-ajax-holder .mfp-content {
  width: 80vw;
}

i wouldn’t place two grid-rows on that – just one
see layout and codes on that page : https://webers-testseite.de/dagmar/

play a bit with background-size and position – you can have background-position : right center – but to show the influence i decided to input a calculated value. First value : background-position-x – second value is : background-position-y

PS: I have omitted the buttons here due to time constraints

PPS: I have given to the columns a transparent background – to better see the same-height option.

You can twist and turn it however you like, if the aspect ratio of an image is determined, then the image cannot appear in full height for all screens and screen widths without cropping the width! That is the fullpage slider for – cover the whole height of the screen.

The full-width slider adjusts its width to the screen width and then calculates the height according to the aspect ratio.
Incidentally, this is the difference between cover and contain for background images.

by the way: where on your page ( 8lettuce.com ) is the slider?

Next – if you are talking about the background-image positioning on shrinking screen width – this can be set by that drop-down select box “image position”

can you try this in your quick css:

#top .iconbox {
  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

#top .iconbox_left_content .iconbox_icon, 
#top .iconbox_right_content .iconbox_icon {
  min-width: 74px;
  margin-bottom: 0
}

It’s hard to give advice without seeing the object at hand.
A bit like I have to make a diagnosis without seeing the patient.
But you should try the binding points, as you indicated above.
____________
By the way, the more-link-arrow is mostly hidden in Enfold – so you could leave it out – whereas I would include the possibility of translating “Read more”.
Then you don’t need the$label = "Read More"; line

Maybe this way:

'<a class="more-link"  href="'.get_permalink($entry->ID).'"><span class="avia_iconbox_title">' . __( 'Read more', 'avia_framework' ) . '</span></a>';

Das sind meine CSS für die Seite :

#top.page-id-2623 .av-magazine-group .av-magazine-entry {
  padding: 10px;
  border-radius: 8px;
}

#top.page-id-2623 .av-magazine-group .av-magazine-entry:nth-of-type(2n) {
  background: #eee;
}

#top.page-id-2623 .av-magazine-group .av-magazine-entry:nth-of-type(2n+1) {
  background: #ccc;
}

#top.page-id-2623 .av-magazine-group .av-magazine-entry .av-magazine-content-wrap {
  border-bottom: none
}

#top.page-id-2623  .av-magazine header {
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  transform: translateY(-50%);
}

#top.page-id-2623  .av-magazine-thumbnail-link {
  display: table;
}

#top.page-id-2623 .av-magazine-group .av-magazine-entry .av-magazine-thumbnail-link img {
 display :none
}

#top.page-id-2623 .av-magazine-group .av-magazine-entry .av-magazine-thumbnail .av-magazine-thumbnail-link:before {
  font-family: entypo-fontello;
  font-size: 40px;
  line-height: 50px;
  position: absolute;
  top: 0;
  left: 5px;
  width: 100%;
  height: 100%;
  display: block;
}

#top.page-id-2623 .av-magazine-group .av-magazine-entry:nth-of-type(2n+1) .av-magazine-thumbnail .av-magazine-thumbnail-link:before {
 content: "\e80c";
 color:#333
}

#top.page-id-2623 .av-magazine-group .av-magazine-entry:nth-of-type(2n) .av-magazine-thumbnail .av-magazine-thumbnail-link:before {
 content: "\e80b";
 color:#666
}

• This reply was modified 2 years, 6 months ago by Guenni007.

But – layout will be a bit different to Mikes – this will add the tags to the meta info area. On some blog styles these will be under cat on others it will be on the bottom:
see here a testpage: https://webers-testseite.de/blog/