Picture of Chris Gillison
Re: Accordion - Image placement
by Chris Gillison - Sunday, 7 May 2017, 11:59 AM

Hi Justin (& Mark, but that was a long time ago)

My understanding of floats is that the image div needs to appear BEFORE the text div in the parent div, so you'd need to change the accordion.hbs file so the accordion-item-text div sits below the image (so basically move that entire div below the last {{/if}}).

Next assign a class to your accordion item e.g. accordion-image-right

Then, adding the following custom CSS seems to work...

  1. .accordion-image-right .accordion-item-body-inner {overflow: auto;}
  2. .accordion-image-right .accordion-item-text {float: left; width: 40%;}
  3. .accordion-image-right .accordion-item-graphic {float:right; width: 50%;}

You'd probably want to clear those floats for small screen sizes (760px or lower)