How to create responsive brands grid

  • Resolved graomogo

    (@graomogo)


    3 years, 12 months ago

    Hi, how do i use [mas_product_brand_thumbnails] to create a responsive brands grid for a separate page on my website? 8 columns on PC, and 3 columns on mobile (with smaller image sizes)

Viewing 1 replies (of 1 total)
  • Plugin Author Yusuf Ansari

    (@yousufansa)

    Hi @graomogo,

    Thank you for trying out our plugin.

    Please use the shortcode like the following [mas_product_brand_thumbnails number=8 columns=8 orderby="date" order="DESC"].

    Then please add the following custom CSS to Appearance > Customize > Additional CSS :

    
.brand-thumbnails {
    margin-left: -10px;
    margin-right: -10px;
}

.brand-thumbnails.columns-8 {
    display: flex;
    flex-wrap: wrap;
}

.brand-thumbnails .thumbnail {
    padding-left: 10px;
    padding-right: 10px;
}

.brand-thumbnails.columns-8 .thumbnail {
    flex: 0 0 33.3333333333%;
    max-width: 33.3333333333%;
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .brand-thumbnails.columns-8 .thumbnail {
        flex: 0 0 25%;
        max-width: 25%;
    }
}

@media (min-width: 993px) {
    .brand-thumbnails.columns-8 .thumbnail {
        flex: 0 0 16.6666666667%;
        max-width: 16.6666666667%;
    }
}

@media (min-width: 993px) {
    .brand-thumbnails.columns-8 .thumbnail {
        flex: 0 0 12.5%;
        max-width: 12.5%;
    }
}

    Hope this helps. Let us know if you have any other questions or need further help.

    Regards

Viewing 1 replies (of 1 total)
  • The topic ‘How to create responsive brands grid’ is closed to new replies.