Well this is a wordpress feature –
if you go to your media library and open one image to edit – there is an attachment page.
If you are using Yoast SEO there is an Option to do this : redirect image attachment page to something.

if you not using it – and you don’t like to use a plugin – you can redirect all image attachment pages f.e. to your homepage via child-theme functions.php:

function image_redirect_attachment_page() {
	if ( is_attachment() ) {
		global $post;
		if ( $post && $post->post_parent ) {
			wp_redirect( esc_url( get_permalink( $post->post_parent ) ), 301 );
			exit;
		} else {
			wp_redirect( esc_url( home_url( '/' ) ), 301 );
			exit;
		}
	}
}
add_action( 'template_redirect', 'image_redirect_attachment_page' );

yes – for book collections there is a lot to do, and this is also a good idea to have a special custom post format on this, because there could be special keywords (like ISBN numbers etc.) .
Most of the time these plugins create only custom post type ( often shorted to CPT – if you see that) , as we have seen from the portfolios.

That could be advantageous in your case.
What I see on the old example page, however, would work without problems only with Enfold elements.
You just have to look through the function of a blog page a bit more.
Don’t worry – every question is a good one; stupid are people who have no questions.

Enfold presents some Options on showing a blog page ( i prefer to style it with ALB Element ) but you can set any page to show the blog ( if you have only one ) by setting it on Enfold Options – Theme Options = “And where do you want to display the Blog?” here you have the choice to set a page as Blog Page.
Under Enfold Options – Blog Layout – you have different settings on that page. ( you need the grid layout ) etc. pp.

Now for those pages that are a collection of existing posts/portfolios there are exactly the blog representations.
Because I see that you have probably created the individual book pages all as posts. So you have the possibility to drag the element “Blog Posts” from the tab “Content Elements” to e.g. a color section. If you want to have a sidebar there, just drag it into a 1/1 container.

Then you can choose the grid display in the element “Blog Posts”.

Whenever you then add a new post in the category, the new entry will automatically appear on the overview page.

But you already know that you probably chose the option : “Header is invisible and appears once the users scrolls down”?

And what do you mean by “When I comment out the script in the quick css-field, than the desktop-display is OK again.”
Quick CSS Input is not at all a place for a script.

on a customer page i did it just with one svg file – and on smaller screens i shift the groups the way i want.
It is a bit more work before – but you have a lot of advantages on that. Fill options etc. pp

OR: with your setting of logo on top nav below: https://webers-testseite.de/cynthia/logo-top-two-subs/

you can set for wide screens on flex layout the logo container to 100% width and set justify-content to space-around.

What would be your idea how the mobile version should look like?

you can use the implemented waypoint script but have your own settings with child-theme functions.php.

for some enfold animations it is only necessary to have fired it once the point of triggering is passed. But sometimes it is nice to include if scroll-direction is important:
f.e. if you like to move a container from off-screen to the center – and on scrolling up it will go off-screen again

for that i use to toggle a class to which i can give the animation rules. The element to observe gets a custom class ( f.e. inview )

function scroll_up_down_change() {
?>
<script>
    (function($) {
	var element_to_animate = $('.inview');
	element_to_animate1.waypoint(function(direction) {
		if (direction === 'down') {
			$(this.element).addClass('animate-now');
		}
	 },{offset: '90%'}
	);
	element_to_animate1.waypoint(function(direction) {
		if (direction === 'up') {
			$(this.element).toggleClass('animate-now');
		}
	 },{offset: '90%'}
	);			  
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'scroll_up_down_change', 9999);

then you can play with offset too.
By the way i believe the 100% offset is if it comes on the bottom into view – so maybe the 90% will do the trick on the change above

See here the last button on that page uses 90% : https://webers-testseite.de/buttons/

and an enfold animation – but you can have your own keyframes aswell – just define it for the toggled class.
Or: See here how it can be used to change header_bg background-color on color-section dependencies.: https://kriesi.at/support/topic/menu-bar-with-dynamically-changing-colors-referencing-the-background/#post-1161520

on former times that was a hard stuff to realize. – Because the list-style-image had a bad browser support but it seem that time has changed a bit:
https://caniuse.com/#search=list-style-image

because Enfold uses as icons an icon-set and did some dimensions on that by line-height of the entypo fontello font. we must reconstruct a bit on that. On your example page there are svg as icons!

If you choose the big icon alb and animation only have icons with links.

you must look to that setup : i have choosen 80px icon-height ! this had to be synchronized with one css setting of that effect.
I gave to the icon alb elment a custom-class of: move

here is the result: https://webers-testseite.de/icon-in-motion/

what i now try to achieve is that the radar effect of enfold is included to that effect.

here is the interims code:

.av_font_icon.av-icon-style-border.move .av-icon-char {
    position: relative;
    display: inline-block;
    overflow: hidden;
    background-color: #fff;
	-webkit-transition: background .5s,color .5s,-webkit-box-shadow .5s;
	transition: background .5s,color .5s,-webkit-box-shadow .5s;
	transition: background .5s,color .5s,box-shadow .5s;
	transition: background .5s,color .5s,box-shadow .5s,-webkit-box-shadow .5s;
	border-radius: 50%;
	-webkit-box-shadow: 0 0 0 2px #bbb;
	box-shadow: 0 0 0 2px #bbb;
    height: 80px;
}

.av_font_icon.av-icon-style-border.move .av-icon-char:hover {
    background-color:  #6b6b6b;
      -webkit-box-shadow: 0 0 0 6px rgba(0,0,0,.1);
    box-shadow: 0 0 0 6px  rgba(0,0,0,.1);
}

.av_font_icon.av-icon-style-border.move .av-icon-char:before {
    position: absolute;
    left: 50%;
    top: 50%;
    -webkit-transform: translate(-50%,-50%);
    transform: translate(-50%,-50%);
}

.av_font_icon.av-icon-style-border.move .av-icon-char:hover:before {
    animation: toRightFromLeft .5s forwards;
    color: #fff
}

/***  animation for that ****/
@-webkit-keyframes toRightFromLeft {
 49% {
  -webkit-transform:translateX(100%) translateY(-50%);
  transform:translateX(100%) translateY(-50%)
 }
 50% {
  opacity:0;
  -webkit-transform:translateX(-100%) translateY(-50%);
  transform:translateX(-100%) translateY(-50%)
 }
 51% {
  opacity:1
 }
}
@keyframes toRightFromLeft {
 49% {
  -webkit-transform:translateX(100%) translateY(-50%);
  transform:translateX(100%) translateY(-50%)
 }
 50% {
  opacity:0;
  -webkit-transform:translateX(-100%) translateY(-50%);
  transform:translateX(-100%) translateY(-50%)
 }
 51% {
  opacity:1
 }
}

quite confused up there in your css.
What would I do now in a hurry.

I would make myself a top 1/1 container ( no color-section) with your logo ( image ALB Element) in it, and link that image to the homepage.
I would only display this container in the responsive case, while I would set the entire logo (span.logo) container to Display: none.
Then only a small correction regarding #main padding would be necessary. Done.
So that you don’t have to set this container on all pages, I would set it with jQuery as first-child of #main on all pages.

See here a quick test page : https://webers-testseite.de/cynthia/special-header/

you can insert this image on each site by filter

add_action('ava_after_main_container', function() {
  echo do_shortcode("[av_one_full …]…[/av_one_full]");
});

Bitte – gern geschehen.

Das kann man natürlich auch auf andere Elemente von Enfold übertragen. Iconboxes etc. pp

Immer wenn gleiche Elemente auftauchen, die in einem gemeinsamen Elternelement stecken.
Gilt zB auch für Listenpunkte – oder Hauptmenu Navigations Punkte.
Bis dann

i guess your site with promo box on the second case is built inside a text-block ? or similar to it.
The wpautop filter adds some empty p-tags ( <p></p> ) here :
and because of rule that influences headings as sibling of p-tag :

p + h1, p + h2, p + h3, p + h4, p + h5, p + h6 {
    margin-top: 1.5em;
}

there will be that outlook.
you can redefine the rule for promo-box – or deactivate wpautop filter in WordPress. (

Or remove with one child-theme functions.php snippet all empty p-tags at all:

function remove_empty_p_tags(){
?>
<script type="text/javascript">
(function($) {
    $('p:empty').remove();
})(jQuery);
</script>
<?php
}
add_action('wp_footer', 'remove_empty_p_tags');

the margin on bottom of the whole promo-box is the same in both cases – but top margin is set here to another value – look into developer tools to see difference

on my test page i took a different screen-width range.

/****  your tablet definitions - play with the values as you like  ***/
@media only screen and (min-width: 600px) and (max-width: 989px) {
  .three-two-one .entry-content-wrapper .flex_column {
    flex: 0 1 47%;
  }
}

/*** this is not necessary because on that screen-width the Enfold default is 100%  ***/
@media only screen and (max-width: 599px) {
  .three-two-one .entry-content-wrapper .flex_column {
    flex: 0 1 100%;
  }
}

you decide what looks best for your page
All new browser can do that – but if you like to have a better browser coverage – see here: https://kriesi.at/support/topic/browser-specific-css/

you see the code above the selector is: grid-entry but to exclude the ajax thing i find it via grid-sort-container
and to exclude the ajax option there is the not rule
this is only for grid layout

How did you embed the video in the Layerslider?
As a layer or background? A few settings that you can set depend on that.

Just try to set the play muted to disabled