Featured Product Section Smaller & Next to each other

Store Design
1

Hello all,

We want to display two featured products under the main product on the product page (Prestige Theme 5.0). But the Sections are too big and are displayed under each other (see here: https://marandino.de/products/wb-nor-2406). I want the width to be 50% and I want two featured product sections to be displayed next to each other.

I already tried to create two new sections, copy the code of the featured-product.liquid and make two different divs. The divs I added to the theme.css and gave one float: left and the other float:right. Something went wrong and the one floating left had an error. This also might not be the most elegant solution (I’m a beginner in coding).

If anyone has an easy way to achieve this I would be very greatful!

Kind regards,

Nathalie

2

@Nath_Sch - I think if you add code like you did, then these same sections will be shown on all the product pages

3

Hi @Nath_Sch ,

Try with below CSS hope it will help.

@media(min-width:768px){
	#main .shopify-section--bordered{width: 50%;}
	#main .shopify-section--bordered:last-child,#main .shopify-section--bordered:first-child {width: 100%;}
	main#main {display: flex; flex-flow: row wrap;}
	#main .shopify-section--bordered .SectionHeader{display:none}
}