Home Support Themes ListingHive Still trying to find the solution πŸ˜‚

Still trying to find the solution πŸ˜‚

  • Author
    Posts
  • cornusandu

    (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

    Don’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

    With enough patience you can try “yellow pencil” wordpress plugin and modify the looks to your taste…

    cornusandu

    πŸ˜‚πŸ˜‚πŸ˜‚πŸ˜‚ Without trying to sound ungrateful . I was hoping for a cool CSS snippet . 😁😁😁😁

    Lenki

    You 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

    *https://ibb.co/J5nkRTX

    cornusandu

    Lenki, 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

    You 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.

    ihor developer

    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

    Hello 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 ?

    ihor developer

    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

    thanks… 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

    ihor developer

    You can try this one, but more CSS changes may be required:

    .hp-listing--view-block .hp-listing__footer {flex-direction:column}

Viewing 13 posts - 1 through 13 (of 13 total)

You must be logged in to reply to this topic.