Picture of Joannes Anthonius Rommers
Aligning images on the page
by Joannes Anthonius Rommers - Wednesday, 8 July 2015, 12:47 PM
 

Hi all,

 

I am currently playing along nicely with this tool (Adapt Authoring Tool). While generating a preview I came to discover that all my images are left aligned in their containers. For most plugins this is not a big issue but with the narrative component for example, a .png image of a product is being pushed behind the left arrow and all following product images as well. Aesthetically very unpleasing.

I know with CSS that {margin: auto;display: block;} will force the image to it's horizontal center and I also know that some CSS could be added to the class field in the components settings area. But what I can not figure out is how to address the correct component.

Did somebody run into this as well or has a successful experience in shifting the images to their horizontal center? What I would like to avoid is to change or edit in the main CSS file so plainly create a course via the Authoring Tool and not via the Framework.

Thank you in advanced, and keep up the good work developing the Adapt Learning tool.

Picture of Lee Graham
Re: Aligning images on the page
by Lee Graham - Sunday, 7 August 2016, 11:55 PM
 

Hi

Old post I know, however this was bugging me also. Solution is to go to project settings and add the following line to "Custom CSS/LESS code:"

.narrative-slider-graphic img{display:block;margin:auto}