Highlighted

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

Community Beginner ,
May 29, 2017

Copy link to clipboard

Copied

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 !

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:

Screen.jpg

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:

Screen2.jpg

Views

249

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

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

Community Beginner ,
May 29, 2017

Copy link to clipboard

Copied

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 !

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:

Screen.jpg

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:

Screen2.jpg

Views

250

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
May 29, 2017 0
Adobe Community Professional ,
May 29, 2017

Copy link to clipboard

Copied

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

Bildschirmfoto 2017-05-29 um 17.20.54.png

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2017 0
Community Beginner ,
May 29, 2017

Copy link to clipboard

Copied

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    

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2017 0
LEGEND ,
May 29, 2017

Copy link to clipboard

Copied

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:

Screen.jpg

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:

Screen2.jpg

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2017 0
Adobe Community Professional ,
May 29, 2017

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2017 0
LEGEND ,
May 29, 2017

Copy link to clipboard

Copied

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).

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2017 0
Adobe Community Professional ,
May 29, 2017

Copy link to clipboard

Copied

That sounds logic to even me. Great.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2017 0
Community Beginner ,
May 29, 2017

Copy link to clipboard

Copied

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  

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2017 0
LEGEND ,
May 29, 2017

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
May 29, 2017 0