Several questions

I have several questions for changes I can’t find answers to.

  1. I would like the decrease the font size for the individual posts pages.
    Oasis Homes – The Best Time of Year to Buy a Home
    In this sample I’d like to decrease the font size to where the title is one line instead of two.

  2. For the listings there is an extra empty box under the attributes. I know that’s where the pricing goes, but we plan to never list the pricing so it’s just taking up space. It looks really bad on mobile.

  3. Can you have a different header for one page on mobile?
    Oasis Homes – Blog
    I’d like to have a different header for the mobile page. The header image needs to be resized for the mobile page but not for desktop.

  4. I’d like to shorten the categories images on the home page for mobile. They look fine on desktop but are too big for the mobile version.
    https://oserealty.net
    I have it set on mobile for 2 columns but it’s not working. If I’m able to do that it would automatically shrink the images and they wouldn’t take up as much space on mobile.

I appreciate any help.

Hi,
Sorry for the inconvenience - these changes require CSS customizations beyond the available theme options. I can suggest sample snippets, but I recommend hiring someone for customizations (e.g. via Fiverr/Upwork) because this is beyond our support scope.

  1. Please try this snippet:

.post--single .post__title {font-size:123px!important}

  1. You can try this CSS code:

.hp-listing--view-block .hp-listing__footer {display:none!important}

Please also remove the custom footer {...} from the custom CSS field because it may affect different areas of the site, it’s targeted at the element type rather than a unique CSS class.

3, 4. These would require more complex snippets.

Hope this helps.

1 Like

Thank you for the response. #1 & #2 worked perfectly. Do you think you’ll take care of #4’s issue in the future?

Sure, we’ll try to improve the UX for mobile, it may be already possible to set 2 columns for categories or reduce their height for specific screen sizes, but this requires CSS tweaks.

Hello
I also want to shorten the category image size i just visited your site. can you tell me the snippet to shorten the category image size Please
Thanks

Please let me know which theme you’re using. If you use ListingHive, you can try customizing the “portrait_small” image size via a PHP snippet Thumbnail Sizes | HivePress Support

Hello
Thanks A lot for your kind answer, actually i want to change the size of category box i want to make it small so that in mobile it can come in two column.
Thanks

If you mean home page and block with listing categories then please try this CSS snippet to set categories block in two columns but please note that it can require further customization

@media screen and (max-width: 47.99em){
	.home .hp-listing-categories .hp-grid__item{
	max-width: 50% !important;
	flex-basis: 50% !important;
	}
}

Hello
Thanks for your kind support
well i tried this nothing happened
Thnaks

Please try this CSS snippet instead

@media screen and (max-width: 47.99em){
	.hp-listing-categories .hp-grid__item{
	max-width: 50% !important;
	flex-basis: 50% !important;
	}
}
1 Like

Hello
Thanks it worked in mobile it is now showing two coloumns
but now the category title font is too big it is overlapping how can 1 reduce the category title font in mobile

Thanks

Sorry for the inconvenience, but customization is beyond our support scope - it includes fixing bugs and guidance about the available features.

If customizations are required for your site, please try customizing it using the collection of code snippets Search · user:hivepress · GitHub and other developer resources, or consider hiring someone for custom work https://fwd.cx/hLhc73mQCD9R

Hello
Thanks For your kind support
Thanks

@yevhen Thanks! It works great for categories and subcategories on portrait mode for mobile devices but how can I do the same for listings?

Now via this css snippet all categories and subcategories on Mobile vertical mode shown 2 columns and it’s great; please guide how to to this via css snippet for shown:

four columns shown categories and subcategories and listing page and listing search results for all pages with responsive font size changes.

I’ve change your css code like below:

@media screen and (max-width: 47.99em){
	.hp-listing-categories .hp-grid__item{
	max-width: 25% !important;
	flex-basis: 25% !important;
	}
}

in mobile portrait mode it shows pretty 4 columns but the issue is:

  1. Listing page for each category and subcategories is not shown 4 columns

  2. search results need same 4 columns

  3. Listing page and all other pages shown listing need same 4 columns

  4. fonts are not changing automatically to small size and they still big size

Please try this CSS snippet for listings:

@media screen and (max-width: 47.99em){
	.hp-listings .hp-grid__item{
	max-width: 25% !important;
	flex-basis: 25% !important;
	}
}

This will probably require further customizations and CSS tweaks (e.g. for scaling fonts and other elements), if you’re not familiar with CSS I recommend hiring someone for customizations, for example on Fiverr https://fwd.cx/hLhc73mQCD9R

1 Like

Thank you, both CSS snippets are working great on Tablet and LapTop but not working good for mobile.

Is it possible to limit these css snippet only for tablet and Laptop and it doesn’t show 2 or 4 column for mobile.

Please try adjusting the 47.99em value, e.g. you can replace it with some value in pixels like 123px and adjust it to apply the snippet to different screen widths.

1 Like

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