Venture Theme - Product page description - grid for videos

Topic summary

Goal: make two product-description videos display side-by-side at full width in the Venture theme, applying only to video sections.

Approach provided:

  • Update HTML to wrap videos in a container with two child items (product-video-container and product-video-item classes).
  • Add CSS in Assets > theme.scss.liquid:
    • .product-video-item { padding: 10px; }
    • @media (min-width: 750px):
      • .product-video-container { display: flex; justify-content: space-between; }
      • .product-video-item { width: 50%; }
        This uses a flex layout (display: flex) to place two videos in a row and control spacing.

Adjustment requested: remove the left and right indent so videos align flush with the edges.

  • Fix: add margin-left: -10px; and margin-right: -10px; (as shown in the helper’s screenshot) to counter the item padding and align the outer edges.

Outcome: the solution achieved the desired full-width alignment; the original poster confirmed success and thanked the helper.

Notes:

  • Screenshots were used to show target alignment; code snippets are central to understanding the implementation.
  • Status: resolved; no further open questions.
Summarized with AI on February 21. AI used: gpt-5.

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

Can anyone help with this?

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!

1 Like

@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.

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.

1 Like

@LitCommerce

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

1 Like