Gallery component Lorenza Theme

[Nadine10]

Is there a way to add some spacing between these logos, and centralise them horizontally? 

Also, on mobile can they be smaller and the arrows be deleted? 

  

[aBox_Agency]

Hello @Nadine10 

Please share the store URL.

Thank you

[Nadine10]

https://myhaveli.com/

[Nadine10]

Could I add that if possible, to make the logos smaller so they all fit on desktop

[Rahul_dhiman]

Hello @Nadine10 

Go to online store ---------> themes --------------> actions ------> edit code------->Theme.css -----> line number 13228
search this code

.image__img, .image__shimmer {
display: block;
position: absolute;
-o-object-fit: cover;
object-fit: cover;
-o-object-fit: var(--object-fit, cover);
object-fit: var(--object-fit, cover);
-o-object-position: center center;
object-position: center center;
-o-object-position: var(--focal-alignment, center center);
object-position: var(--focal-alignment, center center);
top: 0;
width: 100%;
height: 100%;
}

replace with this code.

.image__img, .image__shimmer {
display: block;
position: absolute;
-o-object-fit: cover;
object-fit: cover;
-o-object-fit: var(--object-fit, cover);
object-fit: var(--object-fit, cover);
-o-object-position: center center;
object-position: center center;
-o-object-position: var(--focal-alignment, center center);
object-position: var(--focal-alignment, center center);
top: 0;
width: 75%;
height: 75%;
}

and the result will be

If this was helpful, hit the like button and mark the job as completed.
Thanks

[BSSCommerce-HDL]

Hi @Nadine10, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
.flickity-slider {
    display: flex !important;
    align-items: center;
}

.gallery__slide.carousel__slide.is-visible {
    padding-right: 50px !important;
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Nadine10]

Thank you!

Could the logos be even smaller? And have a bit more spacing between them? 
Also, on mobile could they be smaller so you can see more than one?

[BSSCommerce-HDL]

Hi @Nadine10, 

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above </head> tag: 

<style>
@media (min-width: 768px) {
  .gallery__slide.carousel__slide {
    padding: 0 70px;
   }
   .carousel.carousel__slide {
        width: calc(20% - 1px) !important;
   }
}
</style>

Here is result: 

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

[Nadine10]

Thank you! Sorry again, could you please find a solution for mobile - could the logos be smaller so you can see more than one?

[Nadine10]

For reference - https://dissh.com/