Categories images not showing up on mobile. How do I fix this?

General
1

Hi - my page loads on mobile, the images do not show up under the “Top Categories”. I am currently using the TaskHive theme. Ideally, I’d like for them able to be scrollable, similar to the “Featured Services” section.

Can you please advise how I can fix this to have them show up similar to the featured services section?

2

Please try this CSS snippet:

@media only screen and (max-width: 47.99em) {
    .hp-listing-category--view-block .hp-listing-category__header {display:block}
}

It works this way by default to save the scrolling space on mobile, since category images are not as critical as listing images for browsing and understanding the website content.

1 Like
3

Thanks - this worked to solve the image issue, but is there a way to have it setup to scroll like the featured services instead? That would be ideal so the user doesn’t have to scroll so far down the page.

4

Sorry, there’s no slider layout option for categories at the moment, but we’ll consider adding it to the upcoming updates.

5

Until that occurs, is there a way to manually add it with code to change how the categories are showing up?

6

Please let me know which changes are required, it’s easy to hide or resize something with a simple CSS snippet but advanced layout changes or adding a JS slider would require advanced customizations.

7

I’m looking to replicate the slider that is in the Featured Services section.

9

I understand, unfortunately there’s no simple code snippet for this at the moment, I tested this locally and this would require further HTML/JS customizations. We’ll try to add more layout options with every TaskHive update.

10

Thanks Ihor. In the interim to simplify the page, is there an easy way for me to just remove that section without breaking the rest of the page?

11

If you mean hiding categories on mobile then yes, it’s possible with this CSS snippet:

.home .hp-listing-categories {display:none}

12

that removed the listings, but the header “Top Categories” is still present. Is there a way to remove all of it?

14

Yes, please select this heading in the editor (edit the Home page in WordPress/Pages) and add a unique CSS class for it in the block settings on the right, e.g. .listing-categories-title, then you can target it this way:

.home .listing-categories-title {display:none}

To remove this on mobile only, an extra query is required, but if you just want to delete this heading and categories you can simply delete the blocks in the editor.

15

Please share the extra query. I am seeking to delete it on mobile only.

17

Please try this CSS snippet for only mobiles changes

@media screen and (max-width: 47.99em){
	.home .listing-categories-title {
		display: none;
	}
}
1 Like
18

Thanks for the response but the “Top Categories” text is still present with that CSS.

21

Please try this CSS snippet. Please make sure that you have correctly added the listing-categories-title class for the title of the listing categories block

@media screen and (max-width: 47.99em){
	.home .listing-categories-title, .home .hp-listing-categories {
		display: none;
	}
}
1 Like
22

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.