Accordion column missing

[compania123]

Hi there,
we have an issue with visibility on mobile version of our site - www.mojzubar.eu/cennik. Everything works on standard monitor but on the mobile version column with prices is not visible. Please can you check it?

Thanks a lot

Michael

[lely]

Hello Michael,

I can see it on mobile. It is not an issue with the theme but on how you have added a content. By default table are note responsive. You do have 2 options here.

1.) Make table responsive. See this guide.
2.) Use an alternative way of showing information. Personally I prefer this when I have tables with so much content. I present the data by rows on mobile.

Hope this helps.

[compania123]

Thank you very much for your reply. We had the same issue on home page and this code solved it.

@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;
}}

Unfortunately it doesn’t work on mojzubar.eu/cennik. Please can you check it?

Thanks

Michael

[ruenel]

Hello Michael,

The columns were not visible because you have added a custom css to hide it. To make it visible again, pelase REMOVE this following custom CSS in your code:

@media (max-width:797px){
	.x-accordion table tr td:nth-child(3){
		display:none;
	}
}

@media (max-width:797px){
	.x-accordion table tr td:nth-child(3){
		display:none;
	}
}

@media (max-width:767px){
	.x-accordion table tr td:nth-child(2){
		display:none;
	}
}

Please let us know if this works out for you.

[compania123]

Hi there,
thanks a lot we just didn’t see it :-(. There is only one issue left. As you can see in the second accordion there are two types of prices.

It is ok on full width but on mobile version it looks like this:

There are two kinds of patients with different prices. Unfortunately on mobile version you are unable to recognize which price is suitable for type of patient.

Thanks a lot.

Michael

[jade]

Hello Michael,

Please try adding this code:

@media(max-width: 480px) {
    .x-accordion table tr {
        display: flex;
    }

    .x-accordion table tr td:first-child {
        flex-basis: 50%;
    }

    .x-accordion table tr td:nth-child(2),
    .x-accordion table tr td:nth-child(3) {
        flex-basis: 25%;
    }


    .x-accordion table tr td:nth-child(4),
    .x-accordion table tr td:nth-child(5) {
        display: none;
    }
}

Kindly note that since this is a custom code that changes the default behavior/display of the theme, you will be responsible to maintain or update the code in case you require further changes or if the code stops working in future updates. If you are uncertain how to proceed, it would be best to get in touch with a developer.

Hope this helps.

[compania123]

You’re the best it works perfectly.

Thanks a lot
Michael

[friech]

We are delighted to assist you with this.

Cheers!