Venture Theme - Product page description - grid for videos

[guyv]

Hi!

Please can someone assist me.

I have used a grid

for placing 2 videos in a row in the description on a product page. I would like to do this on almost all of my product pages.

I would like to make the grid full width (see screenshot below). This should only apply to the grids used for videos and not all grids.

Would it be best practice to create a new style in theme.scss.liquid? If so, please can someone assist with a new style that I can place in theme.scss.liquid?

Thanks!

https://electricrideco.com/products/test?_pos=13&_sid=a26482c1b&_ss=r

[guyv]

Can anyone help with this?

[LitCommerce]

Hi @guyv ,

First, you need to edit the html code to display the video like the following structure:

Then go to Assets > theme.scss.liquid and paste this at the bottom of the file:

.product-video-item {
	padding: 10px;
}
@media only screen and (min-width: 750px) {
	.product-video-container {
		display: flex;
		justify-content: space-between;
	}
	.product-video-item {
		width: 50%;
	}
}

Hope it helps!

[guyv]

@LitCommerce

Thank you so much for your help!

This is almost perfect. One small change that I would like to make is to move the alignment slightly so that there is no indent on the far left and the far right. I would like the videos to be where the red lines are in the screenshot below.

Would really appreciate it if you can assist with this.

[LitCommerce]

Hi @guyv ,

Please add code here:

Code:

margin-left: -10px;
margin-right: -10px;

If it helped you solve your issue, please mark it as a solution. Thank you and good luck.

[guyv]

@LitCommerce

Thank you so much for your help! You’re a legend!