How to make an Accordian 'set' align to the Centre?

[JezUK]

At my website, on page https://exteriorrenderings.co.uk/#_Faqs

I have two Accordians in the same row and they seem to have the attributes Float Right and Float Left.

This looks fine when the screen is big enough, but when the screen is reduced to say mobile phone width, the alignment goes wrong.

How can I control the alignment of the Accordians, so that they are each in the middle of their respective columns ? So that when the screen size has been reduced they’ll align perfectly ?

I’ve coloured the borders of both the Accordians and their Columns as well to make things clearer.

Many thanks.

[Prasant]

Hello @JezUK,

Thanks for asking.

Under Column > Customize > Setup > Class give a class name. After that, please add following CSS under Pro > Theme Options > CSS.

@media only screen and (max-width: 600px) {
 .add-class-name {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

Replace class name add-class-name with your own class name.

Thanks.

[JezUK]

Hi Prasant,

Thank you for your kind assistance - unfortunately, your changes didn’t fix anything.

Please can you further advise.

Many thanks.

As you can see here, the accordians are not lining up.

Here is the class name for the columns (I put this for both columns in that row);

And here is that css within the Global CSS area;

[friech]

Hi JezUK,

The CSS code provided actually works, but it only triggers under 600px width, please change that 767px because that is where the mobile responsive view starts.

@media only screen and (max-width: 767px) {
 .accordian-column {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
.x-container .accordian-column:first-child {
	margin-bottom: 1.5em;
}
}

That second CSS block I added right there is to give the columns some spacing when they stack on mobile view.

Hope it helps,
Cheers!

[JezUK]

Thank you so much friech, you guys are awesome !

[paul.r]

On behalf of my colleague, you’re welcome. Cheers!