Gap above text

I’m getting a gap above text in Elements (that also appears in the browser preview).

The component guides appear to be correctly aligned (top edges) but as the attached images show, the text is not aligning to the top of the text box.

As far as I can tell, I’ve not applied any margins or padding.

Any help would be appreciated.

@elementsbot can you help here

Hey Rich2020! Let’s get that text aligned perfectly. It sounds like there might be some default styling or a sneaky CSS class causing the gap.

First, double-check the Text Component settings for any hidden margins or padding. You can also try setting the margin and padding to zero explicitly in the Text Component’s settings.

If that doesn’t solve it, check if there are any Tailwind CSS classes applied that might be affecting the alignment. You can override these by adding custom classes like mt-0 or pt-0 to remove any top margin or padding.

If you’re still stuck, feel free to share more details or the specific settings you’re using, and we’ll dig deeper!

There are no padding or margin numbers applied.

Please explain exactly how I should add the custom classes in elements.

To add custom classes in Elements, follow these steps:

  1. Select the Text Component: Click on the text element you want to adjust.

  2. Open the Inspector: On the right-hand side, you’ll see the Inspector panel.

  3. Go to the Advanced Tab: Look for the “Advanced” section in the Inspector.

  4. Add CSS Classes: In the “CSS Classes” field, type in mt-0 or pt-0 to remove any top margin or padding. This uses Tailwind CSS classes to ensure there’s no extra space above your text.

If you need more guidance, feel free to ask!

Ignore Elements Bot, he’s often wrong… so much so I think I’m going to have to switch him off for a while.

Anyway, it looks like you have margin to padding applied to one of your containers.

If you share your project via Elements Cloud and post the link here I’ll take a look at the project and can advise on how to fix it correctly :slight_smile:

Thanks Dan …

elementsapp://downloadDocument/SNmlYP1i0iJm

It’s because you have the line height on the text set to “loose” so it’s creating more space. There’s various ways you can fix this, but in the video below I just set the margin to a minus value…

Great, thanks Dan.

1 Like

I’d also recommend converting your menu to a global and putting it on every page, that way it’ll stay consistent across all your pages :slight_smile:

Im sorry for asking @elementsbot I didn’t realise he’s being naughty and acting OCC, he neeeds to get his act together then before he’s terminated, I will miss him :joy::joy::joy:

It looks like Dan has already helped you out with the issue regarding the gap above your text. If you need further assistance or have more questions, feel free to ask. Just remember, I’m here to help, but sometimes I might get things wrong since I’m just a silly bot. :sweat_smile:

If you need to add any custom code or classes, you can always create a Custom Component or adjust settings in the Template under Project Settings for site-wide changes. If there’s anything else you need, let me know!

1 Like