lifesimplyrocks

Forgot to mark as resolved.

Perfect, works great. Thanks a lot and have a terrific day.

Thanks for the fast answer.

If we add all the code mentioned, the bottom bar is not responsive. Without the last media snippet (hiding pinterest, reddit and so on, it works).

Here is our complete code we inserted so far into custom css:

@media screen and (max-width:1060px){
.heateor_sss_pinterest_count, .heateorSssPinterestBackground, .heateor_sss_reddit_count, .heateorSssRedditBackground, .heateor_sss_stumbleupon_count, .heateorSssStumbleuponBackground, .heateor_sss_email_count, .heateorSssEmailBackground{
    display: none !important;
}
}
@media screen and (min-width:1060px){
.heateor_sss_line_count, .heateorSssLineBackground, .heateor_sss_whatsapp_count, .heateorSssWhatsappBackground{
    display: none !important;
}
}
.heateorSssSharingArrow{display:none!important}
@media screen and (min-width:1060px){
    div.heateor_sss_horizontal_sharing{
        display:none!important;
    }
}
@media screen and (max-width: 1060px){
.heateor_sss_bottom_sharing {
    padding: 0!important;
    right: 0px!important;
    left: auto!important;
    display: block!important;
    width: auto!important;
    bottom: 0px!important;
    top: auto!important;
}
}

Thank you for this tip. We couldn’t figure out why Elementor stopped working and it was our CDN causing this issue because we had the option Remove Query Strings From Static Resources enabled. Now, when we need to fire up Elementor, we temporarily disable the CDN.

Awesome, that worked. Thanks a lot.

Hello, I have the some problem. The box triggers on posts with many pictures very early, on others with fewer pictures at the #comments. Any ideas?

I tried one of your experiments:

.crp_title{font-size: .8em;color:#000;float:left; clear:left!important;}
.crp_thumb{align:center!important;}
.crp_related { padding-top: 20px; width:100%;}
.crp_related ul  { margin-bottom:0px; margin-left:0px;list-style:none;padding-left:10px; }
.crp_related ul li { float:left; width:240px; padding:0px 6px 0px 0px; list-style:none;list-style-position: inside; height:180px;text-align: left;word-wrap:break-word; }
.crp_related ul li:hover {color: #7fbcf9;}
.crp_related ul li a {list-style-position: outside;word-wrap:break-word;list-style:none!important;}
.crp_related li::before {
    content: "" !important;
    background-color: transparent !important;
    width: 0 !important;
    height: 0 !important;
    top: 0 !important;
}
.crp_clear {clear:both;}

Seems to look pretty good. One question though: How can I make the color of the article titles change on hover?

• This reply was modified 8 years ago by lifesimplyrocks.
• This reply was modified 8 years ago by lifesimplyrocks.

Hello, sorry for hijacking this thread but I didn’t want to open a new one for the same problem. I managed to change the CSS a bit but it’s still not perfect.

Here is my site:

This is the custom CSS:

.crp_related {
	clear: both;
	margin: 10px 0;
}
.crp_related h3 {
	margin: 0 !important;
}
.crp_related ul {
	list-style: none;
	float: left;
	margin: 0 !important;
	padding: 0 !important;
}
.crp_related li, .crp_related a {
	float: left;
	overflow: hidden;
	position: relative;
	text-align: center;
}
.crp_related li {
	margin: 2px !important;
	border: 1px solid #ddd;
}
.crp_related li:hover {
	background: #eee;
	border-color: #bbb;
}
.crp_related a {
	-webkit-box-shadow: none !important;
	-moz-box-shadow: none !important;
	box-shadow: none !important;
	text-decoration: none !important;
}
.crp_related a:hover {
	text-decoration: none;
}
.crp_related .crp_title {
	color: #fff !important;
	position: absolute;
	display: block;
	bottom: 0 !important;
	color: #fff;
	font-size: .8em;
	text-shadow: 1000 .1em .1em .2em;
	background: rgb(0.5, 0.5, 0.5);
	background: rgba(0, 0, 0, 0.5);
}
.crp_related li:hover .crp_title {
	background: rgb(0.2, 0.2, 0.2);
	background: rgba(0, 0, 0, 0.8);
}
.crp_related li {
	vertical-align: bottom;
	-webkit-box-shadow: 0 1px 2px rgba(0,0,0,.4);
	-moz-box-shadow: 0 1px 2px rgba(0,0,0,.4);
	box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.crp_clear {
	clear: both;
}
.crp_title:visited {
	color: #fff !important;
}

.crp_related li::before {
    content: "" !important;
    background-color: transparent !important;
    width: 0 !important;
    height: 0 !important;
    top: 0 !important;
}

.crp_related li {
    padding-left: 6px !important;
    padding-right: 6px !important;
    padding-top: 6px !important;
}