How can I delete the padding between accordion panels set to full width ?

[kaissa_rebatet]

Hi,

Currently working on a website where I used an accordion panel widget set to full width: https://dev.weedo.agency/moneytime/contact.html

I want each block to be stuck together with no padding, but when I preview in browser there are gaps between my blocks content.

How can I delete the padding please ?

I checked all the options and none of them helped me

Thank you in advance !

[fotoroeder]

Looks like you have some stroke? Maybe? If not, we would need a .muse, please. Via dropbox, just your accordion on a separate page.

[kaissa_rebatet]

Thank you for your answers.

I already deleted all the outlines/strokes and spacing also.

Here you can find .muse file: Dropbox - accordionPanels.muse

Hope this can help    

[Günter Heißenbüttel · Accepted solution]

One more reason (not mentioned in my post above), and the decisive one in your case:

You are using system fonts ("Gobold") within the accordion labels. System fonts have to be converted to images during output, because Muse obviously can’t guarantee, that every visitor of your site has these fonts installed.

You can see this issue, because there is this tiny, but important icon:

Solution: Always use "standard fonts" or "web fonts" on your site! Muse’s font menu has clearly categorised font entries and explains shortly, what happens, if you use a font out of one of the different categories:

[kaissa_rebatet]

I changed the font of my labels, and     it works perfectly !

Thank you !

Also, my accordion is not pinned to any place, juste centered to the middle of the page by default..

I'm going to dig a little bit and see how I can improve the overlaping of elements below  

[fotoroeder]

When I set the accordion not to browser width it works as intended. Exciting!

[Günter Heißenbüttel]

Of course! If you use system fonts only "Scaling = browser width" or "Scaling = None" is available. If no scaling is choosen the "font images" keep their size – what means: no unexpected side effects (except the conversion text <_> image).

[fotoroeder]

That sounds logic to even me. Great.

[Günter Heißenbüttel]

There are different adjustments to fix this:

• Select the accordion and set the stroke to "0".
• Select one accordion label (in the upper left corner of the application window you can read "Label: Normal").
• Make sure, that in the accordion configuration the option "Editing:" is set to "Edit together". Now go through every state of the label (Normal, Rollover, Mousedown, Active) and set the stroke to "0".
• Select the whole accordion again, open the "Spacing" panel and set the "Spacing" and "Gutter" values to "0".
• Now, all should work as you are expecting.

One more thing (© Steve Jobs 😞 Apparently, you have pinned the accordion. This is the reason, why the accordion, while opening, overlaps the elements below. Pinned objects are not allowed to influence (push down) other elements of the page.