Shopify themes, liquid, logos, and UX
Greetings,
I have noticed that the Collection List images on my home page appear to have spacing between them. I was wondering if there is a way to remove that spacing and have images stick to each other as the pic attached below. Would anyone happen to know how to do this?
Thank you.
alignaide.com
from this
to this
Solved! Go to the solution
This is an accepted solution.
Hello @ak74
You can add code by following these steps to remove spaces between images on collection list homepage
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 767px) {
.collection-list.grid {
column-gap: 0 !important;
}
}
</style>
This is an accepted solution.
Use below css to make collection link bigger
<style>
@media (min-width:768px) {
.collection-list-wrapper.page-width{
margin: 0;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding: 0;
max-width: 100%;
}
}
</style>
This is an accepted solution.
Hi @ak74
Please use this alternate solution
<style>
.collection-list-wrapper.page-width {
margin: 0;
padding: 0;
max-width: 100vw;
}
.collection-list-wrapper .grid--4-col-desktop .grid__item.collection-list__item {
width: 25%!important;
max-width: 25%!important;
}
</style>
Hi @ak74
You must remove padding of images box. Share page url so I can provide exact css code
Hello there,
It is a collections box, you should see it at alignaide.com if you scroll down in the homepage. I have removed the padding from the collection section but the images are named images so this setting to remove padding is not available.
I hope you can help
Thanks
This is an accepted solution.
Hello @ak74
You can add code by following these steps to remove spaces between images on collection list homepage
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 767px) {
.collection-list.grid {
column-gap: 0 !important;
}
}
</style>
Thank you so much! it worked.
How can I get it to take have the pictures bigger and fit across the screen from left to right?
Hello @ak74
It needs to modify slider code to fit on the screen
This is an accepted solution.
Use below css to make collection link bigger
<style>
@media (min-width:768px) {
.collection-list-wrapper.page-width{
margin: 0;
width: 100vw;
position: relative;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
padding: 0;
max-width: 100%;
}
}
</style>
there is still space on the right side of the page, please refer to the photo below.
Thanks,
This is an accepted solution.
Hi @ak74
Please use this alternate solution
<style>
.collection-list-wrapper.page-width {
margin: 0;
padding: 0;
max-width: 100vw;
}
.collection-list-wrapper .grid--4-col-desktop .grid__item.collection-list__item {
width: 25%!important;
max-width: 25%!important;
}
</style>
Hi. I want to have a seemless look betweeen my photos, same as this:
https://www.ulefone.com/armor-x13.html
Today it looks like this:
What do I need to do?
Hello im interested in the same but the code you've given does not work 😞
can you share store URL?
In the wearables products page, I have framed images that i would like to be touching side by side
Hey @malikaclover
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
@media screen and (min-width: 750px){
.product-grid-container ul#product-grid {
column-gap: unset !important;
}
}
</style>
Thank you for the above, unfortunately it did not work 😞
Also im trying to resize the images slightly how would I do that?
how you want to resize image?
That code working, There is no gap between in images.
There is still space between the images, i need the frames touching side by side
Right now it looks like this :
I need it to look like this:
You can add code by following these steps
1. Go to Online Store -> Theme -> Edit code.
2. Open your theme.liquid file
3. Paste the below code before </body> on theme.liquid
<style>
.card:not(.ratio) {
width: 298px !important;
}
</style>
- Was my reply helpful? Click Like to let me know!
- Was your question answered? Mark it as an Accepted Solution.
I changed your code to 376px and it worked like wonders! Thank you so so much for your patience and your help!!!!
Would you be able to also guide me how to set a full screen (width) background video that would play on loop (no sound) but would be under the header?
Just as below
Instead i have this under header with play button:
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024