Accordion mobile problems

Support
#1

Hi there,
we have two issues with accordion on mobile version of our new website mojzubar.eu.

  1. bio widgets aligment - mojzubar.eu/nastim
    as you can see elements are not aligned properly.

Down below is a correct version on PC

  1. right side is not visible - mojzubar.eu (“cennik sluzieb” accordion)
    in this case price from the right side of accordion are not visible

Down below is a correct version on PC

Thanks for your help.

Michael

#2

Hi There,

Please add the following code to Theme Options CSS

@media (max-width: 797px) {
.x-accordion table tr td:nth-child(3),.x-accordion table tr td:nth-child(2) {
    display: block;
}
.x-accordion {
    margin-bottom: 2.15em;
    max-width: 250px;
    margin: auto;
}}

Hope it helps

#3

Hi there thanks a lot problem with prices solved.

But there is still problem with mojzubar.eu/nastim on mobile version:

  1. bio accordion is not paired with a correct image and there are two of them with image without any accordion (PC vs. mobile version)

  2. two sizes of images width

  3. strange gap between image and accordion

Thanks a lot guys.

Michael

#4

Hi there,

The alignment issue is due to gap elements that aren’t hidden from mobile. You should hide them on mobile.

  1. It’s because that two accordion is in separate sections than images. So when the columns break into a single column, that section will be displayed on the end of those images. There is no fix for that other than placing the accordion directly to the column where the image is.

It’s like this

[row][column][image_1][/column][column][image_2][/column][/row]
[row][column][accordion_1][/column][column][accordion_2][/column][/row]

And should be like this

[row][column][image_1][accordion_1][/column][column][image_2][accordion_2][/column][/row]

  1. You use flip card element on those small images, while those big images are standard images. You should decide what to use to create uniform look instead of using multiple type of display.

  2. Those are gap elements and set to be hidden on large devices, if you intend to hide it on mobile too then it’s best to permanently remove them.

Thanks!

#5

Hi there,
thank you for your reply but we have still two issues on mobile version.

1)

Is there a way how to add gap between these two images outside of column border so the images won’t be stick together and also the accordion will be full width?

2)
I understand that these are two different elements but is there a way how to set same width for image and accordion? It will propably solve the problem from 1) with the accordion width.

Thanks

Michael

#6

Hey there,

  • To fix the first issue, you need to remove the following code from your Customizer:
.x-accordion {
    margin-bottom: 2.15em;
    max-width: 250px;
    margin: auto;
}
  • For the other issue. add the following code in your Customizer as well:
@media screen and (max-width: 767px) {
  .x-card-outer {
    max-width: 100% !important;
    overflow: hidden !important;
  }
}

Hope this helps!

#7

Hi there thank you for your help.
It works but not on a 100%.

There are still no gaps so few elemets are still stick together. This is our last issue.

Thank you guys.

#8

Hi there,

Add the following code in your Customizer as well:

@media screen and (max-width: 767px) {
  .x-column.x-sm {
      margin-bottom: 4% !important;
  }
}

Hope this helps!

#9

Great thanks a lot.

Problem solved.

Michael

#10

Glad we could help.

Cheers!