[mangelreynoldsParticipant]

Hey there! Thanks for a great theme and amazing support!

My accordion is not displaying on mobile. I have tried to use a lot of different codes found on the forum regarding accordion problems on mobile, but none worked. I’m hoping you can help! I have attached a screenshot of what it looks like on mobile! They expand without a problem, but cuts it off entirely without making it responsive. Thanks in advance for your help! I’ll send a second email with my credentials!

[Prasant RaiModerator]

Hello There,

Thanks for writing in!

Could you please provide us with your website URL so we can take a closer look?

Thanks.

[mangelreynoldsParticipant]

Yes sure, the website is agfloors.com/faq . What is odd, is that on the “mobile” preview of the website in Cornerstone, the code I added in the custom css seems to work (and it previews it as if it was responsive). However, when you look at the same website on a mobile device, it does not show them fully and cuts off. Here is the code I have in my custom CSS:

@media (max-width:767px) {
.x-accordion {
max-width: 400px;
}

Thanks for your help!

[RupokMember]

Hi there,

Thanks for writing in! It’s happening because you have set 800px width for the accordion using hte style field. You should use max-width in that case.

However to fix this for mobile, you can add this under Custom > CSS in the Customizer.

@media only screen and (max-width: 979px) {
.x-accordion {
  max-width: none;
  width: 100% !important;
}
}

Hope this helps.

Cheers!

[mangelreynoldsParticipant]

Ah yes!! Changing the code to max-width instead of width in the Style section in Cornerstone worked! Thank you guys so much! You all are awesome!

[JoaoModerator]

Thank you for the kind words!

Let us know if we can help with anything else.

Joao

[Author]

Posts