Spacing between html widgets
OfflineHi, anyone else able to solve the spacing between HTML widgets? We used an HTML widget to put a title for to split sections of an FAQ. then another html with accordion appearance for each of the questions. But there is no space between section 1 last question and section 2 title and then too much/lots of extra space between the title and the first question html widget. Any solutions?
2 Conclusions
LeAnne Dennis Here's the code...you can just add it to the end of your CSS:
.moveitup30 { margin-top: -30px !important;}
.moveitdown30 { margin-top: 30px !important;}
I'm not a developer, but I've heard from developers that overusing the "!important" code is not a best practice, because basically what you're doing is overriding other code that you may not have full visibility on. But it's been working for us! And this is the level of CSS that I'm comfortable with. Hope it helps!
Hi LeAnne Dennis!
Another thing you can do is check the accordion page in the Styles page of your Digital Workplace. Often, we provide an accordion-title class to go along with the accordion to better bring the title html into closer proximity of the accordions that they are related to.
10 Replies
LeAnne Dennis We created code in the CSS to fix spacing. Now, if add the "moveitdown30" class, the 2nd widget will move 30 pixels down the page. Happy to share the code with you if you think that would be helpful!
Jocelyn Flint That would be great thank you!
LeAnne Dennis Here's the code...you can just add it to the end of your CSS:
.moveitup30 { margin-top: -30px !important;}
.moveitdown30 { margin-top: 30px !important;}
I'm not a developer, but I've heard from developers that overusing the "!important" code is not a best practice, because basically what you're doing is overriding other code that you may not have full visibility on. But it's been working for us! And this is the level of CSS that I'm comfortable with. Hope it helps!
Hi LeAnne Dennis!
Another thing you can do is check the accordion page in the Styles page of your Digital Workplace. Often, we provide an accordion-title class to go along with the accordion to better bring the title html into closer proximity of the accordions that they are related to.
Lindsay Pasichnyk Thanks Lindsay! that worked, but is there a way to put extra spacing between the new title and the list of questions before it?
LeAnne Dennis That specific spacing is indeed dependent on theme code. You can either request to change your theme code through your CSM or PM for ALL widgets on the DWP, or you can do as Jocelyn suggested above and add a code snippet that is a new class. Depending on where you put it, you may or may not need that !important.
ie.
.margin-top { margin-top: 30px; }
LeAnne Dennis When we've wanted to add a bit of spacing between sections we have usually put a blank HTML content widget where we want a little bit of blank space! Not sure if that's what you're looking for :)
Samantha Condello Thank you :) We have tried that but then the end user see's a "this HTML widget hasn't been set up yet".
LeAnne Dennis We add a space to the widget so it technically has been configured and doesn't show that message
Samantha Condello Aww thank you for the workaround advice