Home>Support>Post loop thumbnail images tiling

Post loop thumbnail images tiling

Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].

Hey guys,

Hope you’re all well.

I’m having an issue with the posts carousel on a website I’m updating –

HOME

As you can see on the homepage under recent shows, some of the thumbnail images for more recent posts have tiled themselves, despite being sized the same as the images used for later posts.

Any thoughts on how to fix this?

Thanks!

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 8 years, 2 months ago Alex S
    Hi, I Work Here

    Hi PSBakh,

    This is happening due to your custom CSS for this widget. Please open the area where you’ve added the following CSS:

    .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item .sow-carousel-thumbnail a {
        display: block;
        width: 300px;
        height: 420px;
        background-size: auto;
    }
    
    .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item h3 a {
        text-decoration: none;
        font-size: 14px;}
    
    .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item .sow-carousel-thumbnail a:hover {
        background-size: auto;}
    

    Please replace the first instance of background-size: auto; with background-size: 300px 420px; and then replace the second with… say, background-size: 320px 440px; How does that look? You may wish to adjust the size for the hover effect (the second background-size) to get a more desired hover effect.

    In other words, please replace the above-quoted CSS with:

    .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item .sow-carousel-thumbnail a {
        display: block;
        width: 300px;
        height: 420px;
        background-size: 300px 420px;
    }
    
    .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item h3 a {
        text-decoration: none;
        font-size: 14px;}
    
    .sow-carousel-wrapper ul.sow-carousel-items li.sow-carousel-item .sow-carousel-thumbnail a:hover {
        background-size: 320px 440px;}
    
Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More