Responsive Logo on Grid

Hi there,

I’ve been asked to make a thread on the issue so here we go.

We currently have a logo on grid hover. It looks nice on Desktop and Laptop but becomes off centered on other screens. Is there a way to make it responsive?
https://theranch.clickertraining.com/new-home/

#grid-942 .tg-item-media-holder .tg-item-overlay:before {
margin-left: -20px;
top: 80px;
position: absolute;
content: url(https://theranch.clickertraining.com/wp-content/uploads/2017/10/kpa-logo-clicker-blog-grid.png);
}

thanks for your help as always!

Hi There,

Please change the custom CSS to this:

#grid-942 .tg-item-media-holder .tg-item-overlay:before {
    left: 50%;
    top: 50%;
    margin-left: -25px;
    margin-top: -45px;
    position: absolute;
    content: url(https://theranch.clickertraining.com/wp-content/uploads/2017/10/kpa-logo-clicker-blog-grid.png);
}

Thanks! It looks great now!

You’re welcome.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.