Commuter’s title mobile alignment

Hello,

Thank you for reaching out, and I understand your frustration. I’m happy to help you with the challenge you’re facing.

To center the title of each commuter part on the mobile version of your page, you can use the following CSS code. Please add this code to your theme’s Additional CSS section or your custom CSS plugin, you can also try adding it in the Advanced section of your widget:

@media only screen and (max-width: 767px) {
.elementor-widget-heading {
text-align: center !important;
}
}

This code targets the heading widgets specifically and centers them when the screen width is 767 pixels or less (typical mobile screen size).

If the code still doesn’t work, it’s possible that there might be conflicting styles from other sources. In such cases, you can try adding !important to the CSS rules to ensure they take precedence. However, use !important sparingly, as it can lead to less maintainable code.

If the issue persists or if you need further assistance, please provide more details or access to your site, and I’ll do my best to assist you.

Best regards,

Hi Enmanuel,

thanks for your support. Actually (I don’t know why) I totally wrong on writing my question. I wrote “Commuter”, actually I should have written “Accordion”: my trouble is regarding the Accordion titles on mobile version, I would like center them, together with their toggles.

Sorry for misunderstand, my fault.
The page is the same as the message above (where I’ve written the password, as this page is set as protected/private at the moment).
Thanks again!

Hi, @steven1979it.

No worries!

Try using the following, inside of the Advanced tab of the Accordion widget:

@media only screen and (max-width: 767px) {
.elementor-accordion-icon-left {
float: none!important;
}
.elementor-tab-title {
text-align: center;
}
}

Hope that works for you!

Kind Regards,

Hi @aracelil,

thanks! Actually it works if switched in 2 parts, both starting with @media etc.

I’ve seen the toggle and the title are considered a block together, so I’ve used some padding to center the title on the icons.
Maybe not the best practice, but it works. I’m testing now.

Hi, @steven1979it.

Thanks for the reply.

Glad you were able to find a workaround. Let us know if you need further help on this.

Kind Regards,

Thanks @aracelil and @enmanueldiaz for the support.
Mine is not the most elegant solution maybe, but it is work and I’m happy as I’ve learnt something new that lets me improve.
Regards

Hi, @steven1979it.

It’s always a good feeling to try things on our own and grow in our knowledge…good for you!

For now, I’ll go ahead and close this thread. Don’t hesitate to open a new one should you need help with another topic.

Take Care,