Custom row width, black overlay on Header Video

Hi,

I am a beginner in wordpress website development and I need some help.
I need a row that is of a custom width like, 80% of the full width. I tried using the full width option and imputing width:80% in the CSS style of ‘Edit Row’ but it resulted in a strange size and left aligned row.

Another question I have is how do I add a semi-transparent black overlay on top of the header video but behind the text and CTA button?

Can anyone kindly assist me?
Thank you.

Regards,
Li En

Hello Li,

  1. Can you please provide a link to an affected page and specify the row that you want to change?

  2. This issue seems to be already resolved in this topic:
    How to make Header Media Video not full width

Kind Regards, Roman.

Hi Roman,

  1. Here is the link to the page. https://projectfun-kr.digipen.edu/?page_id=611 The row at the top with the image is set as full width, I would like to make it the same as the width of my content (the white opaque width).

  2. Yes, thank you so much!

Regards,
Li En

Hello Li, thank you for the link.

Can you please make that row Standard instead of Full Width first, and leave here a note?

Kind Regards, Roman.

Hi Roman,

I have set the row to standard. How can I increase the width to make it match the white opaque where my content is?

Thank you.

Best Regards,
Li En

Hello Li, try to use the following CSS code.

You can add CSS code in Customize → Additional CSS section.

.page-id-611 #pg-611-0 {
    max-width: unset;
    width: calc(100% + 30px);
    margin-left: -15px !important;
}

Please feel free to ask any other questions that you might have.

Kind Regards, Roman.

Hi Roman,

Fantastic, it works! Thank you so much for your help!

Best Regards,
Li En

Great! You are welcome Li :slight_smile:

Kind Regards, Roman.