Return to previous page

Single Product page layout issues for product video content and some custom dev

This topic has 4 replies, 2 voices, and was last updated 1 week, 3 days ago ago by Jack Richardson

GreenLion

Participant

January 15, 2026 at 18:24

Hi, There are currently some annoyances on the layout of content on my single product pages.

As you can see in the attachment the product video is top aligned rather than centre aligned. the playback button is also left aligned.
The product image or video selector you can also see has the playback button spilling out of the border.

The back button also should be a square rather than a rectangle and have padding between the button and the product title.

Content is visible for topic creator and
support staff only.

Files is visible for topic creator and
support staff only.

#464291 Copied

3 Answers

Jack Richardson

Support staff

January 15, 2026 at 18:58

Hello @GreenLion,

We have checked the issue, and the video is displaying correctly on our side:
https://prnt.sc/W2ZSc-tlOs1O, https://gyazo.com/2646d90efbddd69165dc2c723a52912e.

Could you please clarify how we can reproduce the issue on our side, or provide an example of a product where the problem can be replicated for further investigation?

Regarding the square shape of your button, we have noticed that it currently has different padding values:
https://prnt.sc/76VDJQhnDNVh.
To make the button square, please adjust the padding values in the editor to be the same (for example, 5px, 10px, or 20px for all sides):
https://prnt.sc/4u32jwIw5zgz.

Best regards,
Jack Richardson
The 8Theme’s Team

#464296 Copied

GreenLion

Participant

January 16, 2026 at 14:47

I am confused, I sent the screenshot showing the video is top aligned and you sent the same view. We want the video to be aligned in the middle of the product image viewer so there is even space between the carousel and the product name.

even in the video you sent you can see the video button icon is spilling out of its borders.

Finally regarding the back button again you have told me how to change the button size but then the button is overlapping the product name? obviously thats not acceptable – how can we resolve both

#464341 Copied
Jack Richardson

Support staff

January 17, 2026 at 09:28
Hello @GreenLion,

We apologize if we did not fully understand your request. If you would like to center your video on the slide (https://gyazo.com/fc99e868d2762f90558c97213f6d3f3d), you can use the following custom CSS:

.swiper-control-top .swiper-slide { display: inline-flex; align-self: center; }

Regarding your next request about button spacing, if you increase the padding for your button (https://prnt.sc/hEeKPtQYMZ8u), please note that since you are using Elementor content based on sections and columns, you will also need to increase the width of the column containing the button (https://prnt.sc/eQT7HaEJ7FhN).

However, we recommend migrating your button and title content to Containers for greater flexibility and to avoid hardcoding column widths. You can find more information here: https://elementor.com/help/container-element/

Best regards,
Jack Richardson
The 8Theme’s Team
#464378 Copied
Viewing 4 results - 1 through 4 (of 4 total)