A Craft theme user encountered two layout issues on collection pages:
Problem 1: Dynamic image sizing
Problem 2: Text width without images
Solutions provided:
For static image sizing:
.media > img {
object-fit: contain;
}
For full-width text (no image):
.collection-hero__title + .collection-hero__description {
width: 100%;
}
.collection-hero__description .article-template__content {
max-width: 100%;
}
.collection-hero__description {
max-width: 100%;
}
Status: Both issues successfully resolved with CSS customizations.
Using craft theme. Picture size changes dependent how much text is in the collection page. Too little text, not all of the picture shows. Too much text, the picture is elongated. Can someone help me to fix that?
Also, to combat this, I created a new collection template with the display picture unchecked so it is just text. But the text does not go all the way across the page as if the space for the non existent photo is still there. I would like to fix this as well.
@thetinbin can you share a Screenshot and the store url to better undertsand the issue
I’m not at my laptop right now to share a screenshot but the web address is below and I’ll link the category that shows no photo and how the text does not go all the way across the page.
https://www.thetinbin.com/collections/primitive-home-decor
This looks fine on a mobile device but on a desktop the text does not go all the way across
Sally and Sue
The Tin Bin
Yes, that is correct. And ideally for the other default collection template where the photo shows I would like the photo to be static and not dependent upon the text for how big or small the photo is. If you look at just about any other collection you’ll see that a photo is there but the photo size is dependent upon the amount of text.
Sally and Sue
The Tin Bin
If you look at folk art crafters tab at top and click on baskets by Gin, not enough text to show whole picture. If you click on Craig Yenke, it’s perfect because there is more text. But if I added more text to that one, that santa would be elongated and strange looking.
So to be clear, I have two collection templates. One that has the picture turned on and one where it is turned off because the photo is so weird looking. Ideally, I would like to have both problems solved - more text showing without photo, and the photo size being static so the photos all display correctly.
Thank you! You are a genius!
That solves the photo problem. What if you don’t want a photo and want the text to go all the way across the page?
@thetinbin also add the below code
.collection-hero__title+.collection-hero__description {
width: 100%;
}
.page-width--narrow {
max-width: 100%;
}
.collection-hero__description {
max-width: 100%;
}
Hope this helps.
Thanks
that one did not work. It says there is an error. Let me know if I did something wrong. You have been so helpful. I really appreciate it.
My bad @thetinbin use the below, remove the one you aded now.
.collection-hero__title + .collection-hero__description {
width: 100%;
}
.collection-hero__description .article-template__content {
max-width: 100%;
}
.collection-hero__description {
max-width: 100%;
}
YES! THAT WORKS! Thank you so much!