How to remove padding from cover block?

  • rod

    (@nomadarod)


    5 years, 3 months ago

    Hi!
    I realized that my cover image didn’t reach the left and right extremes of the background and I guess it is because this element has padding.

    If that’s the case, how can I remove the padding? directly in the editor? Is it going to be reverted back in a future update if I don’t do it in a child theme? And to repeat the process in several pages, I need to add a class to the element?

    thanks in advance

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    5 years, 3 months ago

    Please provide a link to a page on your site where we can see this. Thanks. Note: Your link will be public and we will not later remove it.

    Thread Starter rod

    (@nomadarod)

    5 years, 3 months ago

    Here it is:

    link

    • This reply was modified 5 years, 3 months ago by rod.
    • This reply was modified 5 years, 3 months ago by rod.
    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    5 years, 3 months ago

    The background image fully fills the block. Is it the mustard-color block you want to completely cover it?

    Thread Starter rod

    (@nomadarod)

    5 years, 3 months ago

    I want it to cover it completely on the sides, like a banner. I am guessing the cover block has padding. And I am a bit lost on the best way to edit it and recreate it in several pages, if I should create a child theme or what?

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    5 years, 3 months ago

    This is the best I’m able to do

    .wp-block-cover .wp-block-cover__inner-container, .wp-block-cover-image .wp-block-cover__inner-container {
    width: 100%;
    height: 100%;
}
    Thread Starter rod

    (@nomadarod)

    5 years, 3 months ago

    Thanks Steven. I’ll try it.

    Can you help me know where do I add it? I need to create a child theme?

    Moderator Steven Stern (sterndata)

    (@sterndata)

    Volunteer Forum Moderator

    5 years, 3 months ago

    Maybe the solution is to use a different block.

    Thread Starter rod

    (@nomadarod)

    5 years, 3 months ago

    I think I found the element and the width variable responsible for it.

    I added in the aditional css costumizing:

    .wp-block-cover .wp-block-cover__inner-container {
    width: 100%;
}
.wp-block-cover {
		padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

    But this will apply the changes on all elements which have those classes, allover the website, right? How can I apply it only in certain occasions? I tried to select the element “cover” in the page and add a class to that block called “page-banner”, and then return to the css customiser and add that new class behind the other classes, like this:

    .page-banner .wp-block-cover .wp-block-cover__inner-container {
    width: 100%;
}
.page-banner .wp-block-cover {
		padding-top: 0px;
  padding-right: 0px;
  padding-bottom: 0px;
  padding-left: 0px;
}

    but it didn’t work. What am I doing wrong?

    • This reply was modified 5 years, 3 months ago by rod.
    Thread Starter rod

    (@nomadarod)

    5 years, 3 months ago

    It’s good. I had a css mistake, the space between .page-banner and .wp-block-cover.

    .page-banner.wp-block-cover .wp-block-cover__inner-container {
    width: 100%;
}
.page-banner.wp-block-cover {
     padding-top: 0px;
     padding-right: 0px;
     padding-bottom: 0px;
     padding-left: 0px;
}

    now it worked 😉

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘How to remove padding from cover block?’ is closed to new replies.