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?
Topic summary
Goal: Tweak the Lorenza theme’s gallery logos—add horizontal spacing, center them, reduce size (desktop and mobile), and remove arrows on mobile.
Context and attempts:
- Store URL shared: https://myhaveli.com/.
- Desktop: One solution edits Theme.css (selector .image__img, .image__shimmer) changing width/height from 100% to 75%, which reduces logo size; screenshots show the effect.
- Another suggestion was to add custom code in theme.liquid (above ), but the exact code isn’t visible in the thread; images indicate spacing/size adjustments.
Remaining requests:
- Make logos even smaller and increase spacing.
- Mobile: show multiple logos at once (smaller thumbnails) and remove navigation arrows.
- Reference for desired mobile behavior: https://dissh.com/.
Status:
- Partial desktop sizing achieved; precise spacing and mobile layout/arrow removal not yet resolved.
Notes:
- Code changes (CSS in Theme.css and custom code in theme.liquid) and screenshots are central to understanding the proposed fixes.
- No final decision or confirmed solution; discussion remains open pending a mobile-specific implementation and arrow removal.
1 Like
Could I add that if possible, to make the logos smaller so they all fit on desktop
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
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 tag:
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 
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?
1 Like
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 tag:
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
Thank you! Sorry again, could you please find a solution for mobile - could the logos be smaller so you can see more than one?
For reference - https://dissh.com/