Headline top margin

[Paul_Hill_Guitarist]

When I used classic custom headlines, the mtn class removed the default margin above the headline, although the doesn’t seem to work with the newer headline element. I want to use the newer headline element as there are more parameters to edit, although I need to be able to easily remove the top margin.

If I use a headline element and remove the padding from the section, row or column, it looks fine on desktop and mobile preview. If I view the page on my iPhone, the default margin above the headline is no longer there and the gap is too small. My workaround is to use text elements instead, although this is not ideal.

Is there an easy way to remove any upper margin or padding from the headline element? I might have missed something obvious, but it is driving me crazy at the moment!

[tristup]

Hi Paul,

Thanks for reaching out.
Can you please provide any screenshot marked with the issue or any video that helps us to recognize the problem you are having? I would also request you to share the login credentials to check the same by logging into your website.
Please provide the following information:

– WordPress Site URL & Login URL
– Specific Page URL and the section where you are having this issue
– WordPress Admin username/password

To create a secure note, click the key icon underneath any of your posts.

Thanks

[Paul_Hill_Guitarist]

A good example is with a headline element in a header. The margin is either present or not, depending on the device. With Safari, it looks like this:

And with Chrome it looks like this:

Safari on another device shows like the Chrome screenshot and my phone looks like the Safari screenshot. I either have no margin on one device, or a margin that is way too big on the other device.

[kory]

Hey, @Paul_Hill_Guitarist! Thanks for writing in and sorry to hear that you seem to be having an issue with your headlines. Regarding the need to remove / add margin to a v2 Headline Element, by default the v2 Headline does not have any margin applied to it. If I simply inspect a v2 Headline on the frontend of the site, you’ll see there is not spacing applied to it from the static stylesheet:

However once you add margin via the Margin control in the v2 Headline Element’s controls:

You will see that it gets applied at that point:

So you have full control over where and how much margin is to be placed around your Headline Element. I have reviewed your site, and I cannot see any instances where there is differing margin from one browser to the next. I checked across Chrome, Safari (Mac), Safari (iOS), and other browsers, and I’m seeing consistent output everywhere. If you’re trying to remove / add margin responsively, this will of course need to be done with some custom CSS, or you can have two versions of the same Element that you show / hide using the responsive hiding controls on the Customize tab of each Element.

Since I cannot replicate the margin issue you took a screenshot of above, perhaps you have rectified this at this time? Let us know if there’s anything else you still need assistance on; however, I cannot seem to duplicate those results at this time.

[Paul_Hill_Guitarist]

Thanks @kory. I have now replaced all the temporary text element titles with v2 headlines and it seems to be working OK. I ran many tests and I cannot now recreate the original problem I was having. The strangest part was when I added a new headline to the header, decided to not do that so hit undo and resaved, then the header worked fine my end in all browsers. Must have been a temporary glitch in the Matrix. Thanks for your help fixing this issue, even though I have no idea what actually fixed it!

[matt]

Well, glad to hear it’s resolved now, Paul!