Remove white space between separator and footer

  • Resolved Copiaurbietorbi

    (@copiaurbietorbi)


    4 years, 5 months ago

    Good day folks,

    We added a separator to one of our pages and after the configuration, we noticed that there is still a white space between the separator and the footer.

    All margins and padding are set to zero. We added the code below and helped somehow but there is a white space in between still. We are not experts, but quick learners though. We feel that is too much code for something like this. Needless to say that we would want all the pages in the site (except the frontpage of course) to follow the same design with the separator.

    .site-main p {
    margin: 0;
    }

    entry-footer {
    margin-bottom: 0;

    article.hentry {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
    }

    This issue is important to us as we are planning to develop other pages with sections and we want to use the separators with them as well.

    Could you give us a hand please?

    Two last things. One, we noticed the separator is not as responsive for mobile settings as we thought it would be. Do we need to adjust that too?

    Second, what form can we use to send the link to the page we need help with?

    In advance, thank you for your help and interest.

Viewing 4 replies - 1 through 4 (of 4 total)
  • Plugin Contributor gambitph

    (@gambitph)

    You can add up to -300 for the Margin Top and Bottom to pull up/down the separator. You can find this option on your Style Tab > Spacing: https://i.imgur.com/yDBnyB7.png

    This can help you remove the white space between the Separator block and your footer.

    I think what happened on your Separator block is that values were added for some settings, like the Separator Height.

    To make it looks nice on mobile, you can adjust the settings for mobile. Click the mobile responsive button first (https://bit.ly/2UJX5im) so that your changes/adjustments will be set only on mobile view.

    Our blocks are responsive on mobile if it’s set at default settings. Custom values added for desktop will also be applied to mobile. Since this is currently not intuitive, we are investigating how to leave the settings on mobile at default even if you’ve added some custom changes on desktop.

    What kind of form do you need? Do you need a custom form like the Contact Form?

    Thread Starter Copiaurbietorbi

    (@copiaurbietorbi)

    Hello gambitph,

    Thank you for getting back to us. We are not trying to add any form yet, but just add some shape dividers for the pages. What we need is to make sure that these blocks are seen in the computers and mobile devices properly.

    The pages do have certain margins on the right and left. How do we adjust these to cover the whole width of the pages?

    Thank you for your help and interest.

    Plugin Contributor gambitph

    (@gambitph)

    We have Divider and Separator blocks that you can use as your shape divider on your site. Stackable blocks are mobile responsive as long as they are set at default settings.

    You can make the blocks into full-width by clicking the Change Alignment button in your toolbar: https://i.imgur.com/doMeFLn.png

    You can also try using the Stackable feature, Block Background: https://i.imgur.com/LC6vOoe.png
    When you use the Block Background feature, your block will turn into whole sections. You can check out our documentation to know more about Block Background: https://wpstackable.com/blog/column-backgrounds-and-block-backgrounds/

    Thread Starter Copiaurbietorbi

    (@copiaurbietorbi)

    Hello gambitph,

    Thank you for getting back to us. We’ll look into the block background feature and see how it goes. We ony need the shape divider to have full width, but not the text, which is what we think the change aligment does, but we will check it out as well.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Remove white space between separator and footer’ is closed to new replies.