Applying an aside caption

Hey laptophobo,
Thank you for the link to your demo site, perhaps using a text element and a image element in the same column with Grid CSS would be a good solution:

Try adding the custom class grid-column to a full width column, and add the custom class grid-image-right to the image element inside the column. Then add your text element inside the column but we won’t use a custom class for it.
Add this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:

@media only screen and (min-width: 768px) { 
.grid-column {
    display: grid;
    grid-template-columns: repeat(12,1fr);
    grid-template-rows: auto;
    grid-column-gap: 1pc;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}
.grid-image-right {
	display: grid;
    grid-column-start: 4;
    grid-column-end: span 9;
    grid-row: 1;
}
.grid-column .av_textblock_section {
	display: grid;
    grid-column-start: 1;
    grid-column-end: span 5;
    grid-row: 1;
    padding: 8%;
    color: #000;
    background-color: #eee;
    z-index: 1;
}
}

and adjust the colors to suit.
Now below 767px, for mobile the image and text will be stacked:

and for tablet and above the text offset will be consistent:

I tried to do this with the image caption but it didn’t work well with the image element structure and the caption field doesn’t allow HTML and buttons easily like the text element so this may be more useful.

Best regards,
Mike

Hi,
Glad to hear, let us know if this helped and we will close this thread.

Best regards,
Mike

Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.

Best regards,
Mike