Picture of Katha Em
Gap between components/ elements
by Katha Em - Tuesday, 4 July 2017, 8:49 AM

Hi everyone,

some time ago I started working with Adapt Learning. So this is my first post in this community;)

My question is: Is there a way to reduce/ change the gap/ distance between the different elements?


Thanks a lot,


Picture of Scott L
Re: Gap between components/ elements
by Scott L - Thursday, 13 July 2017, 7:27 PM

Hello Katha,

I am guessing you are referring to the vertical space between the components on a page. IS that what you mean? For reference to what components are (if you're not already acquainted with them), see the "Learn your ABCs" section of https://github.com/adaptlearning/adapt_framework/wiki/Framework-in-five-minutes

The gaps, or padding, between components is controlled by a variable in one of the Less files. To be able to modify this, you need to be using the framework outside of the Authoring Tool. The file can be found here:


Towards the top of that file, there is a variable to modify padding for blocks:

@block-padding: 60px;

If you change this to @block-padding: 10px; you will see that the components are much closer together. To see the change in action after making this edit, save the file and then in the command line you would use the $ grunt build command to re-build your course, and viewing it with $ grunt server should show you the updated course with the changes (the reduced padding).

Does this help?


Picture of Katha Em
Re: Gap between components/ elements
by Katha Em - Monday, 17 July 2017, 8:46 AM

Thanks for the answers. It worked:)

Picture of Paul Hilton
Re: Gap between components/ elements
by Paul Hilton - Friday, 14 July 2017, 7:39 AM

FYI If you are using the authoring tool this change can be made in the "custom CSS/LESS" field on the project settings page.