Align image in vertical tabbed content

Support
#1

Hi. I need vertical tabs. Cornerstone will not permit it in the default Tabs dialog, so I downloaded and installed vertical-tabs.tco and selected it as a Preset. When I use the [image] and [lightbox] shortcodes, I am unable to right-align the image inside a tab.

Can you tell me how to right-align an image so that the headline and paragraph text flow to the left and under the image?

Thank you.

#2

Hi @SwissArmyKnife,

Thank you for writing in, but at this time I am not entirely certain what it is you would like to accomplish based on the information given If you wouldn’t mind providing us with a little more clarification and provide us the direct page URL where we can see the issue. We’ll be happy to provide you with a response once we have a better understanding of the situation.

Cheers!

#3

Yes. You can see an image of a picture frame in the first tab:

https://my-right-brain.com/how-to/build-a-picture-frame-process2/

Thank you.

#4

Hey @SwissArmyKnife,

Thank you for providing the URL. To right align images in the tabs element, try adding the following code in the Element CSS under Customize tab of your Tabs element:

$el .x-img.alignright {
    max-width: 100% !important;
}

$el .x-img.alignright img {
    max-width: 220px !important;
    margin: 0;
    float: right;
}

Let us know how this goes!

#5

Thank you. But it did not work. The image is sized correctly and pushed to the right of the content area, but it is not “floated”, as the paragraph text below it does not wrap to the left of the image.

#6

Hey @SwissArmyKnife,

Do you want to display like this?

Please change your content and use something like this:

<p class="alignleft">[image class="alignright"]A frame that is designed to hold a photo some other 
rectangular object requires a ledge, cut into the underside of the frame, to hold the object in place. 
This is the purpose of the rabbet. Into that rabbet you may lay glass, beveled mat, photo, 
and rigid backing. [lightbox]</p>

We would love to know if this has worked for you. Thank you.

#7

Your suggestion worked. In order to collapse the whitespace above the third sentence, I converted the <p> to <br/><br/>. Now I can move on to the other tabs.

Thank you very much.

#8

Glad we could help.

Cheers!

#9

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.