Home › Support › Themes › ListingHive › Still trying to find the solution 😂
Still trying to find the solution 😂
-
AuthorPosts
-
cornusandu 3 months, 1 week ago
(ihor3 days, 12 hours agodeveloper
Thanks, I’ll try to optimize this layout for small screens. You can customize it by yourself via code snippets if you’re familiar with CSS.)Hello Ihor. After spending quite a few hours I am still not sure how can I do this 2 by 2 listings view on mobile. Can you help me ? Thank you very much for your help.
valmes 3 months, 1 week agoDon’t you think it will look weird? There is no space on small screens to show anything of value besides tiny pictures… I just tried to make two listings from the demo page, here you go: https://ibb.co/1QKWYkS
valmes 3 months, 1 week agoWith enough patience you can try “yellow pencil” wordpress plugin and modify the looks to your taste…
cornusandu 3 months, 1 week ago😂😂😂😂 Without trying to sound ungrateful . I was hoping for a cool CSS snippet . 😁😁😁😁
Lenki 3 months, 1 week agoYou can try use text-overflow and change font size, to hide some content which is creating another lines and making listing so long. I used it to title only, but think that imagination is your border 🙂
Snippet to title text-overflow:
hp-listing__title{white-space: nowrap; width: 100p%; overflow: hidden; text-overflow: ellipsis; border: 0px solid #000000;}With 15px font-size and one-line title there is 20 characters (320px device), 26 characters (360px device) and 32 characters (414px device). That’s enough for me.
Screen: https://ibb.co/J5nkRT
https://css-tricks.com/almanac/properties/t/text-overflow/
Some simple solutions: I would delete some sections from header too – if you need date, just leave date with no “added on”. Change some names, for example “not allowed” for just “no”. I You can try move message and favorite buttons below price, then price will shown correctly.
Lenki 3 months, 1 week ago*https://ibb.co/J5nkRTX
cornusandu 3 months, 1 week agoLenki, thank you very much. That is super info. Worked great . Any idea how to view on mobile, 2 listings side by side ? I would like to take this moment to thank you very much for your help. 👍👍👍
Lenki 3 months, 1 week agoYou can try using WP-block columns and put there shortcode. On 100% width of your site you can make 2 blocks, and then in every block put shortcode with listings by 2 columns. Then effect is, you’ll have 4 columns on desktop and 2 on mobile and then try some solutions I wrote earlier.
I tried put 2 listings side by side, but It looks fine only on really big screens, more than 400px width (iP+, Google Pixel etc.), I gave up. But this font-size, overflow etc. can improve look, If you wanna try.
You can start with this CSS snippet:
.hp-template--listings-view-page .hp-listings .hp-grid__item {flex-basis: 50%; max-width: 50%;}But this requires further customizations, listing details will not fit into 50%.
cornusandu 3 months, 1 week agoHello Ihor,
That is looking good i just need to work a little bit on customizations. Thank you very much for your help.
Also, when i check Google speed insights i get something funny , maybe you can assist me with this.
When i check with HTTP:// i get around 90% Score, when i check with HTPPS:// i get around 50% Score . Is this fixable ? Or this is normal and corect ?Please check the suggestions from Google, if the page speed is lower than 100% there’s a list of suggested improvements. I can’t help you with customizing your site, but I can provide some general guidance – I recommend using Autoptimize plugin to improve the site performance.
inzerat 1 month, 2 weeks agothanks… one more thing
How do I use css to wrap the “heart and message” icon on the next line to make it look better?like this: https://ibb.co/M6qty53
You can try this one, but more CSS changes may be required:
.hp-listing--view-block .hp-listing__footer {flex-direction:column} -
AuthorPosts
You must be logged in to reply to this topic.