[HanaffanParticipant]

Dear X-team,
I would like to have an image with multiple-lines text next to it in my accordion heading… I was able to get the image in it, but when trying to have the text vertically centered next to it, I always end up with one line centered next to the image and the rest of the text beneath the image…
I tried this in the style part of the accordion item:
[accordion_item title="text for heading" parent_id="home-accordion" open="false"]

and I tried it over custom CSS in Customizer (which ends up replacing the icon):

.internationalaccordion .x-accordion-heading .x-accordion-toggle:before {
content: url(‘http://aicando.org/wp-content/uploads/2016/08/wedding-e1470482266844.png’);
float: none;
transform: rotate(0deg);
margin-left: 3%;
display: inline-block;
vertical-align: middle:
}

Is there an easy way to get all text lines centered next to the image?

Thanks in advance,

greetings,

Marc

[ThaiModerator]

Hi Marc,

I would like to check but your website is in construction mode.

Would you mind providing us with login credentials so we can take a closer look? To do this, you can make a post with the following info:

– Link login to your site
– WordPress Admin username / password

Don’t forget to select Set as private reply. This ensures your information is only visible to our staff.

Thanks.

[HanaffanParticipant]

This reply has been marked as private.

[RupokMember]

Hi Marc,

I can’t find the accordion on your site. Would you point that? Meantime you can try with :after pseudo element instead of :before.

Cheers!

[HanaffanParticipant]

http://aicando.org/en/

just under the above masthead revolution slider

I think I tried after before but then the text would not show in line with the picture at all….

[HanaffanParticipant]

With after the text shows up above the image…

[HanaffanParticipant]

So first accordeon item is by editing the style CSS of the accordeon item, and the first line appears centered next to the image
Second is custom Css in appearance with “before” pseudo element and the whole text appears next to the image, but now centred and if i put vertical-align: middle, then one line will show centred, the rest below the image. Difference to item style css is that the image replaces the icon i front of the text.
Third is with “after” pseudo element which makes the text appear above the picture…

Lovely greetings,

Marc

[ChristopherModerator]

Hi there,

You should keep icon or image. To add image, please update your code to :

.x-accordion-heading .x-accordion-toggle:before {
    content: url('http://aicando.org/wp-content/uploads/2016/08/wedding-e1470482266844.png');
    float: left;
    transform: rotate(0deg);
  
}

To display image on left or right side of title, you should target :before selector.

Hope it helps.

[HanaffanParticipant]

Hei Christopher
But this is exactly what i did and it does not solve the problem that the text is not vertical centered is not solved by this…..

greetings

Marc

[ChristianModerator]

Hey Marc,

In this case, it would be best to hire a web developer to work closely with you as this is getting into custom development which is outside the scope of our support. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://community.theme.co/custom-development/

Thank you for understanding.

[HanaffanParticipant]

Really, there is no simple way to just align a textblock vertically next to an image in accorion heading?

[HanaffanParticipant]

Ok, I guess the simplest way is to just make the text an image as well with the same height as the first image…

[ChristopherModerator]

Glad to hear that you found a workaround.

[Author]

Posts