Responsive Scaling and Small Screen

Hey Yarrp

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%;
  }
}

• This topic was modified 2 years, 4 months ago by hebhansen.

The page I need help with: [log in to see the link]