The bugs are actually two:

1. If the menu element of first level is near to the border of the screen, it always shows childs with left: 100% and it will spill out of screen.
2. All next level menus do the same, but even worst, because they cannot be seen on the screen, again script doesn’t consider available screen and display it always with left: 100%

The issues are reproducible if your menu have several elements (we have 8 primary menu elements, and 3 level deep menu) on first level and below 1400px resolution.

However,

1. When trying to switch languages, no unfolding of the options bar (arrow down) take place. That makes it impossible to select the other language option.
2. Unfolding of the other navigation menu items is very inconsistent; is there an issue with the “area” which sees the user selection?

Under the previous 2.x version of Colormag this problem did not exist,.

I have traced back the problem to the WP Accessibility plug-in option “Hide the accessibility toolbar on small screens” (or alike – this was freely translated from Dutch to English).
For the time being, I have removed the selection of this suboption, thus the Accessibility sidebar is now active.

I am new to yarrp and really happy with it’s ability to relate across all content. I used to have CSS on my old related that I was very pleased with. Scale up and down dynamically with screen and also smooth transition into one column on mobiles. I adopted all I could from old into other Yarrp CSS I located and I am almost there:

Adds opacity to minimize attention
Removes opacity on hover

Scaling does something, but posts overlap rather than scaling when I scale browser. It does switch into 1 column but in a none crisp way and then posts are not scaled to screen but rather too wide.

Can anyone crack this and help me out?

Css:

/***************************************/
/*********** Related Posts *************/
/***************************************/

/************ Inline Posts *************/
.yarpp-thumbnails-horizontal .yarpp-thumbnail, .yarpp-thumbnail-default, .yarpp-thumbnail-title {
	display: inline-block;
}

/********** Individual Post ***********/
.yarpp-thumbnails-horizontal .yarpp-thumbnail {
	border: 1px dashed rgba(127,127,127,0.1);
	vertical-align: top;
	padding: 2px;
}

/******* Image Thumb - Overlay ********/
.yarpp-thumbnail > img, .yarpp-thumbnail-default {
    padding:0;
    float:none;
    margin-bottom: 10px;
    opacity: 0.7 !important;
}
		
/**** Image Thumb - Remove Overlay *****/
.yarpp-thumbnail > img:hover, .yarpp-thumbnail-default:hover {
    transition: .8s ease;
    opacity: 1 !important;
}

/************* Image Area **************/
.yarpp-thumbnails-horizontal .yarpp-thumbnail > img, .yarpp-thumbnails-horizontal .yarpp-thumbnail-default {
	display: block;
	border: none !important;
	margin: auto;
}
		
/***** Change the Post Title Style *****/
.yarpp-thumbnails-horizontal .yarpp-thumbnail-title {
	font-size: 16px !important;
	max-height: 2.8em;
	line-height: 1.4em;
	margin: 10px 10px 10px 10px;
	text-decoration: inherit;
}

/**** Grabs a Default Thumb if none ****/
.yarpp-thumbnail-default {
	overflow: hidden;
}

.yarpp-thumbnail-default > img {
	min-height: auto;
	min-width: auto;
}

/********* Responsive Scaling **********/		
.yarpp-thumbnails-horizontal {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
        grid-gap: 10px;
}

/*** Define Small Screen - 1 Column ***/
@media only screen and (max-width: 500px){
.yarpp-thumbnails-horizontal {
    width: 100%;
  }
}

Not sure if a different configuration would fix?

Invoking via shortcode: [flickrgallery type=’flickr’ user_id=’**deleted**’ view=’photosets’]
In General Settings using pure javascript Lightgallery.

Thanks for any assistance!
Greg

I need some advice on how to apply this custom css also on tablet and small screen. Currently it works on Desktop but on small screens it adds to much space between.

/*Kein Space zwischen Headings & Paragraph*/
p.has-text-align-center, h4 {
margin-top: -20px;
}

Thanks for any advice

Al