Shop This Look - Envy Theme - products in vertical position

[Teddy9]

Hi,

The Envy Theme has a great Shop This look feature when you promote 4 products.

All our ‘Looks’ contain 3 product resulting that the products are presented in a triangular formation and not in a square formation. We really would like the have the product in a nice vertical line.

Is there anyone that already did this for Envy and can give me some directions? I would be very grateful.

Attached the situation including print screens of the current and desired situation made in photoshop.

https://mood-street-petit.myshopify.com/

password: jolo

[Ahsan_ANC]

Hi, @Teddy9

You can try this code

1. Go to Online Store-> Theme->Edit code
2. Asset-> theme-index.min.css ->paste the below code at the bottom of the file.

@media(min-width:786px){
.stl__outer-products-container .stl__products-container {
    flex-direction: column !important;
	margin-top: -152px !important;
}
.stl__outer-products-container .stl__products {
    flex: 0 !important;
	}
	.grid__image {
    display: flex;
    justify-content: center;
}
.indiv-product img{
width: 39% !important;
}
}

[LitCommerce]

Hi @Teddy9 ,

Go to Assets > section-shop-the-look.min.css and paste this at the bottom of the file:

@media screen and (min-width: 768px) {
	.stl__main {
		justify-content: space-between !important;
	}
	.stl__image-container {
		flex: 0 0 60% !important;
	}
	.stl__outer-products-container {
		flex: 0 0 25% !important;
		padding-top: 0 !important;
	}
	.stl__outer-products-container .stl__products {
		flex: 0 0 100% !important;
	}
}

Hope it helps!

[Teddy9]

Thank you your solution worked out great!

[Teddy9]

Thank you! Your solution worked out great as wel! Super!