Narrative product page "webpage" spacing

Solved
Highlighted
Tourist
5 0 1

Good day, 

 

please have a look at my stores product page  im basically not happy with the fact that all the images are displayed at different sizes making it look untidy and each image starting and ending at different levels, please assist. i dont mind how it looks on mobile as that is a lot more neat :

https://3rift4charity.myshopify.com/collections/all

I would ideally prefer if this page looked more like this: https://meonyouvintage.com/collections/new-in?page=2 simply have 2 images next to each other / ( 2 rows) with images following. 

 

please let me know

 

0 Likes
Highlighted
Tourist
7 0 0

I personally like the different levels, looks smart. What Theme are you using?

0 Likes
Highlighted
Tourist
5 0 1
Hi, I'm using the Narrative theme.
0 Likes
Highlighted
Tourist
5 0 1

does anyone know how to make this change? 

0 Likes
Highlighted

@kini 

Is this the result you're after?


PixelSnap 2020-06-22 at 13.25.51@2x.png

Something to keep in mind with this kind of layout is that if you're mixing landscape and portrait images the layout may cutoff some of the product shots. The top right image is an example of this.

Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan
Available for custom development
0 Likes
Highlighted
Tourist
5 0 1

@RyanDejaegher  hello, 

 

yes this is exactly what i'm looking for, i would much rather change the way i take the images then. 

0 Likes
Highlighted

This is an accepted solution.

@kini  you can add this code below to get this result. Make sure you add it to the very end of the file

/* Go to Themes -> Actions -> Edit Code -> Assets -> theme.scss.liquid */


@media(min-width: 750px) {
.card__image-wrapper {
    padding-top: 75% !important;
}

.card__image-wrapper img {
    object-fit: cover;
}

.card__info {
    min-height: 200px !important;
}
}

 

Chat/Message on FB Messenger for quickest response: https://m.me/dejaegherryan
Available for custom development
1 Like
Highlighted
Tourist
5 0 1

@RyanDejaegher you amazing thank you!

1 Like