Hy guys,
Hoping someone can help.
On my homepage, I have a collection list, but the images I have for these collections are round. They look great when viewing on a widescreen, however when viewing on a phone or a narrow browser, the aspect ratio crops.
this is what it should look like:
this is what it looks like on a narrow browser:
What I think would work is to fix the aspect ratio to square- that way the full round image would be visible. However, if you can think of another way to get the same result, that would be great also.
Link to website: RepublicaLDN
Thanks!
@Csconstant
Please add the following code at the bottom of your assets/theme.scss.liquid file.
@media screen and (max-width: 590px){
.collection-collage__item.one-whole {height: auto !important;}
}
@media screen and (min-width: 591px){
.collection-collage__item.large--one-third {height: 190px !important;}
}
Thanks!
@dmwwebartisan thanks for your reply and the help.
It’s definitely done something but didn’t quite work.
It initially just didn’t show the first collection, so reduced the number of collection to 6. But still crops the top and bottom of the images.
@dmwwebartisan I played around a bit with the numbers and got this. I’d say it was 90% there, but it still crops the sides on mobile.
@media screen and (max-width: 260px){
.collection-collage__item.one-whole {height: auto !important;}
}
@media screen and (min-width: 261px){
.collection-collage__item.large--one-third {height: 260px !important;}
}
