First of all, the password for this site is "ivy". I'm having a visual problem with sub/child categories and how they are displayed, especially on mobile devices. I'm using your awesome Kalium Photography demo theme for this site. If you click on my category for "FILM", you will see that I currently have four subcategories under that category. On a desktop browser, it seems to be ok at the moment (although I would love the content to shift down a bit so that "THE GRIFT" subcategory isn't so close). But it's the mobile devices that are really the problem. On tablets or phones, the subcategories start to mix with the content so you can't see the text. Please see attached picture. But, in your demo for the Photography theme, under the "NATURE" category, your subcategories seem to successfully "push down" the content so that they don't clash (please see attached picture).
Is there a custom code that I can enter so that my subcategories "push down" the content when need be so that they don't clash (and also a bit more white space for the desktop browser version)? Let me know if this is confusing. Thanks so much! Love the theme!
Thank you Ylli! This code worked beautifully for mobile devices. Is there any coding that would also fix the (less intrusive) spacing issue for desktop browsers? (see attached picture) This issue is only cosmetic, so no worries if it's not an easy fix. I would just love the spacing for the second row of categories to the pictures to be a little more.
Hello Ylli. The code that you supplied below doesn't seem to be working anymore (even though it's still in the Custom CSS). On mobile devices, the subcategories are again "mixing" with the content so you can't see the text. The code you previously gave me "pushed" the content down so the text could be seen. But it suddenly stopped working. Please advise. Thank you!
Hello Ylli. So sorry to bug you about this topic again. But my client is asking for a fix so I thought I would inquire one more time. For the portfolio subcategories: when two lines of subcategories exist, the text of the second line would originally overlap with the images. On July 11th, you gave me CSS code that worked to "push" the image content down when the subcategories were visible (so there was no overlap). A month later, this code suddenly stopped working so I asked for assistance again. Then you gave me a new code on August 12 where made the background of the subcategories white. The images don't get pushed down anymore and now a white box just overlaps them. This is only slightly annoying for desktop viewing (see attached picture), but it's very annoying for mobile viewing since a large portion of every first image is cut off by the subcategory box.
I'm not asking for customization help. All I want is for the categories to work like they do on your "Photography" theme where two lines of subcategories seem to push down the below image content instead of overlapping. Thank you for your help/time!!
Thanks for your continued help. Sadly, the text is still overlapping the content on mobile devices (after the theme update and the replaced file). I ended up putting back on the background color for mobile size so that you can at least read the text (even if the white block still goes over the image). I guess that will have to do...
Hmm this is very very strange, can you please send us your WordPress username and password? We need to investigate your site and then get back to you if we have possible solution.
Make sure to choose Private Reply when you send us sensitive informations!
Hello!
First of all, the password for this site is "ivy". I'm having a visual problem with sub/child categories and how they are displayed, especially on mobile devices. I'm using your awesome Kalium Photography demo theme for this site. If you click on my category for "FILM", you will see that I currently have four subcategories under that category. On a desktop browser, it seems to be ok at the moment (although I would love the content to shift down a bit so that "THE GRIFT" subcategory isn't so close). But it's the mobile devices that are really the problem. On tablets or phones, the subcategories start to mix with the content so you can't see the text. Please see attached picture. But, in your demo for the Photography theme, under the "NATURE" category, your subcategories seem to successfully "push down" the content so that they don't clash (please see attached picture).
Is there a custom code that I can enter so that my subcategories "push down" the content when need be so that they don't clash (and also a bit more white space for the desktop browser version)? Let me know if this is confusing. Thanks so much! Love the theme!
Thanks for your kind words :)
To fix that problem please add the code below to Custom CSS
@media screen and (max-width: 600px) { .product-filter ul { display: table; } }Thank you Ylli! This code worked beautifully for mobile devices. Is there any coding that would also fix the (less intrusive) spacing issue for desktop browsers? (see attached picture) This issue is only cosmetic, so no worries if it's not an easy fix. I would just love the spacing for the second row of categories to the pictures to be a little more.
Thanks again!!
Hi Jason,
We will check if this problem is happening to our demo too, we will fix that through the theme update :)
Thank you! Looking forward to that update. Cheers!!
Glad to hear that.
Hello Ylli. The code that you supplied below doesn't seem to be working anymore (even though it's still in the Custom CSS). On mobile devices, the subcategories are again "mixing" with the content so you can't see the text. The code you previously gave me "pushed" the content down so the text could be seen. But it suddenly stopped working. Please advise. Thank you!
The current URL for this website is now: http://www.ivythaide.com/
Hi Jason,
The only solution for the moment is this:
.product-filter .portfolio-subcategory.is-active { background: #fff !important; }That works, thanks! I wonder why the other code stopped working all the sudden. But glad it's working again!
Hi Jason,
I don't know exactly what happened there but i'm glad that problem is fixed now :)
Hello Ylli. So sorry to bug you about this topic again. But my client is asking for a fix so I thought I would inquire one more time. For the portfolio subcategories: when two lines of subcategories exist, the text of the second line would originally overlap with the images. On July 11th, you gave me CSS code that worked to "push" the image content down when the subcategories were visible (so there was no overlap). A month later, this code suddenly stopped working so I asked for assistance again. Then you gave me a new code on August 12 where made the background of the subcategories white. The images don't get pushed down anymore and now a white box just overlaps them. This is only slightly annoying for desktop viewing (see attached picture), but it's very annoying for mobile viewing since a large portion of every first image is cut off by the subcategory box.
I'm not asking for customization help. All I want is for the categories to work like they do on your "Photography" theme where two lines of subcategories seem to push down the below image content instead of overlapping. Thank you for your help/time!!
Hi Jason,
Sorry for the delay of the answer, as we were on holidays break and support team was partly active. Now we are back and able to help with any issue.
Can you please update to Kalium 1.9.4 and check if this problem is fixed to you?
Also please download this file and replace it in this directory (of the theme): /tpls
This should fix your issue. It's very strange why this problem is happening to you only.
Thanks for your continued help. Sadly, the text is still overlapping the content on mobile devices (after the theme update and the replaced file). I ended up putting back on the background color for mobile size so that you can at least read the text (even if the white block still goes over the image). I guess that will have to do...
Hi Jason,
Hmm this is very very strange, can you please send us your WordPress username and password? We need to investigate your site and then get back to you if we have possible solution.
Make sure to choose Private Reply when you send us sensitive informations!
Hi Jason,
I fixed your problem by adding this CSS on your Custom CSS area:
.product-filter .portfolio-subcategory { position: inherit; }There is any other alternative, so i hope that you like it :)