Hello all!
I’m working on a site for a client and they were trying to tweak themselves and now I’m seeing weird extra spacing before buttons on the site. It’s only happening on buttons generated by the theme and not a 3rd party app. I know it’s button related because when I delete the buttons the space disappears. The weird thing is making edits will remove the space (like deleting and recreating the button) but after saving the space repopulates. There are also weird lines, I have no clue what this is. Nothing is between the text and the button
That pattern where the space disappears when you edit but comes back after save almost always means the markup is being regenerated from a stored value, not from what you are editing live.
Two usual culprits. The rich text editor keeps an empty paragraph above the button and re-inserts it on save. Toggle the <> HTML view in the editor and look for an empty <p> or <p> </p> right before the button, then delete it there rather than in the visual view. The other is a spacing setting on the button block itself in the theme customizer, which quietly overrides anything you change inline.
The weird lines sound like a leftover <hr> or the default border on an empty container. Open the live page in browser devtools and inspect the gap. If it is margin-top on the button wrapper it is a theme setting, if it is a separate empty element sitting above the button it is the editor.
Is this a Page built in the rich text editor, or a button inside a section block in the theme customizer?
Yea I was figuring this had to be somewhere else, it’s driving me crazy. link is fubuwpilates.com for reference. And it only happens before each button and when I create new buttons it’s the same thing. The page/sections were build in the theme customizer
Hi @Qthephotog
Welcome to the Shopify Community! Please share your store URL and password (if it’s password-protected), so I can check and provide you with the exact solution.
Best regards,
Devcoder 
Are you talking about this strip?
It is actually an appointments widget, squished into one vertical line:
Looks like that app is configured to auto-insert widget before or after an element, but selector chosen is very broad and app inserts the widget next to each button.
There are four of them on the homepage.
You need to see the app configuration and chose a more specific selector, not something like .button
Hi @Qthephotog,
I just looked at your site, and the design is beautiful, but those little bugs can drive anyone crazy. When clients tweak the customizer, they often press the “Enter” key too many times in the text box. This creates hidden, empty lines that push the button down. Those empty spaces can also pick up stray link underlines. That is exactly what creates the weird lines you are seeing.
To fix this, open the theme customizer and click on the text box right above the button. Put your cursor at the very end of your text and hit “Backspace” a few times to delete any hidden spaces. You should also check if they added an empty “Divider” block by mistake. If that does not work, delete the text block entirely and type the words into a fresh one. This removes any bad code hiding in the background.
Hope this helps,
and she is the one who added her own appointment widget, this makes perfect sense! Thank you so much, I’ll troubleshoot this further
