Remove padding from header image

Hi!

I would like to remove the padding from the header image which I use on every sub-page. How does the css have to look like so that the new css rule has only an impact to the padding of the header image (see attached screenshot, marked in red) and not to the rest of the structure (see screenshot as well).

Best regards,
Hendrik

Hello Hendrik, please check this topic:

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

Kind Regards, Roman.
aThemes Support

Hi Roman,

I read the other thread but it is not clear for me how to use the image without columns in elementor. I used a new section with full width. Can you provide a screenshot how to do the configuration in elementor?

Best regards
Hendrik

Hello Hendrik,

It looks like you have to use columns even for full width widgets. So you can just set zero padding here:

Kind Regards, Roman.
aThemes Support

Thanks, that helps. Is there also a solution using CSS rule which will also work for all future sub pages automatically?

Hello,

Is there also a solution using CSS rule which will also work for all future sub pages automatically?

I can try to help you with this, but can you please provide a link to an unmodified page first in order to let me inspect it with the browser tools?

Kind Regards, Roman.
aThemes Support

Here is an unmodified page: https://www.hendrikbornholdt.de/tools-fuer-coaching-und-moderation/

Hello there,

Thank you for sharing the link.

Try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .elementor-972 .elementor-column-gap-default > .elementor-row > .elementor-column > .elementor-element-populated {
      padding: 0;
    }

Regards,
Kharis
aThemes Support

Hi Kharis,

the provided code works for

but not for other pages like https://www.hendrikbornholdt.de/agile-spiele-und-simulationen/ or https://www.hendrikbornholdt.de/agile-quiz/

Best regards,
Hendrik

Hi Hendrik,

For more consitent result on other pages, you have to edit each first row and add a class name from Elementor row’s Advanced Settings.

For example: first-row

Update page.

Then add the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    .first-row .elementor-element-populated {
      padding-left: 0 !important;
      padding-right: 0 !important;
    }

Regards,
Kharis
aThemes Support

Hi Kharis,

thanks. That works for me.

Best regards,
Hendrik

1 Like

Geat! You’re welcome Hendrik!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis
aThemes Support