How can I add multiple round images in a row on my website?

Store Design
, , ,
1

Hey guys,

i want to add more collections in a row. The size should become smaller

Like this

https://community.shopify.com/post/1564512

But it doesn´t work in my Shop.

The Url is www.kolyem.de and the password is eafroh

2

@Artcope

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.css ->paste below code at the bottom of the file.
#shopify-section-template--16164980687114__2b8ea029-cf65-4e9a-9036-fa75f578498a .grid.grid--uniform.grid--no-gutters {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
#shopify-section-template--16164980687114__2b8ea029-cf65-4e9a-9036-fa75f578498a .collection-image--square {
    border-radius: 100%;
}
@media only screen and (min-width: 769px) {
#shopify-section-template--16164980687114__2b8ea029-cf65-4e9a-9036-fa75f578498a .medium-up--one-fifth {
    width: 10%;
    padding: 0px 10px;
}
}
.collection-item__title--overlaid {
    position: relative;
    color: #000;
    top: 0 !important;
    transform: none !important;
    margin-top: 10px;
    font-weight: bold;
    background: transparent;
}
#shopify-section-template--16164980687114__2b8ea029-cf65-4e9a-9036-fa75f578498a .grid.grid--uniform {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.collection-item:not(.collection-item--below):after {
    display: none;
}

After Code apply layout

KetanKumar_0-1668144224531.png
KetanKumar_0-1668144224531.png1920×880 132 KB

3

@KetanKumar perfect !!

but i have still a problem. The size in mobile version is still big, how can i make the sizes like in instagram ?

4

@Artcope

its my pleasure to help us