How can I correct my newsletter block design?

HTML-CSS
1

Hello,

I have a block where visitors can subscribe to my newsletter, but the space is too wide (see the red arrow in attached file).

The plugin I used is “WP subscribe pro”, but they don’t want to help me anymore cause I only paid for 1 year.

Can anyone help me to reduce this space? :slight_smile:

news
news767×361 27.5 KB

2

Hi rasketdetreve

Can you share the URL to this page? Then we can have a look.

Cheers
Tom

3

It’s impossible to really help based on a screenshot.

I’m guessing the space is a combination of the top-margin on the heading element and the top padding on the container.

4

Of course, for example on this page, near the bottom ;

5

Look at that closely with the brower’s inspector. There is an empty h4 above the h3 that has a big top margin on it. That h4 shouldn’t be there to begin with. Or at least it shouldn’t be before the h3.

1 Like
6

Thanks, but I don’t really know how to modify that, as I created the design with a plugin and I don’t know CSS… :sleepy:

7

Hi @raskdetreve

I believe the question may be out of scope of this forum. Without having access to the back-end of WP website with the plugin (to be clear I am not asking to share credentials), we cannot see what possibilities the plugin offers. It may also be caused by the setup of your WP website which requires an h4 in that block.

I think you may have better luck on the WP forum as there are higher chances someone else is using that plugin (not all of us use WP).

Good luck!
Tom

8

The plugin widget only has a title and text input, which is an h4 and a p element. Your title element is empty and you have an h3. The h3 seems to be part of the theme, not the plugin.

If you can remove the h3 and use the plugin title you might still need to change the top margin.

.wp-subscribe-single #wp-subscribe .title {
  /* set to 0 or however much margin you want */
  margin-top: 10px
}

If you can’t get rid of the h3 and use the widget title, one option is to use a negative margin on the h3

.wp-subscribe-single #wp-subscribe h3 {
    margin-top: -40px;
}

Both selectors will target all plugin instances. If you want to only target the one on the specific post you might try adding the post id in front of the selector. Although, I’m not sure how stable the id is (updating the page might update the id).

For example:

#post-10841 .wp-subscribe-single #wp-subscribe h3 {
    margin-top: -40px;
}

There are plugins that can help you add custom CSS

1 Like
9

I tried the second code and it works like a charm, thank you very much ! :grinning: :+1:

10

No problem, happy to help.

11

Great to see how you really went the extra mile, @lasjorg!

1 Like
12

Hi again,

I just changed my newsletter plugin, and in consequence, the provided code doesn’t work anymore :frowning_face:

The empty space (see the red circle) is a little bit too big…

Capture
Capture776×428 45.8 KB

I tried to modify the following code, but I can’t reduce the space :

.wp-subscribe-single #wp-subscribe h3 {
    margin-top: -40px;
}

You can see the newsletter form below any post of my blog : https://transactionbourse.com/

13

First of all

WordPress plugins use mainly php, then Html and css and js…

14

The selector you need is different now, you can try

h1.mailpoet-heading {
    margin:0;
}

If that doesn’t work:

h1.mailpoet-heading {
    margin:0 !important;
}
15

Thank you very much, it’s working! :slight_smile: