Make listings page with filter sidebar wider

[Ardain]

Hello, in RentalHive the listings page with it’s sidebar can effectively show 3 columns with listings at most because after that it gets too squished and each listing is too narrow. I wanted 4 columns so I added that simple snippet for it.

Now I needed some way to widen the container on listing page so it can hold those 4 columns of listings and also search bar on left side and look good. For me the template creation didn’t work as good as changing current native template with code, so with help of ai I managed to scramble this code:

/* Widen listing container and filter sidebar */
@media screen and (min-width: 1440px) {
    /* 1. Ensure the container's width is expanded */
    .hp-template--listings-view-page .container, 
    .hp-template--listings-view-page .hp-page {
        max-width: 100%;
        width: 100rem; /* Adjust this as needed for the overall width */
    }

    /* 2. Ensure the parent layout uses flexbox */
    .hp-template--listings-view-page .hp-layout {
        display: flex;
    }

    /* 3. Target the sidebar to set a fixed width */
    .hp-template--listings-view-page .hp-page__sidebar {
        flex: 0 0 25rem; /* Sidebar width: Adjust this to make it narrower/wider */
        max-width: 25rem; /* Match the width */
    }
}

It looks really good now and exactly as I wanted it. I guess I’m not the only one who faced this issue so it could help some. I also haven’t encountered any problems with it yet, but the question is how to make it better, or what’s missing there, or maybe what is not needed there, or what to change in there so it works properly with hivepress on desktop and on mobile in all situations? Thank you in advance

[andrii]

Hi,

Thank you for sharing the solution, it will be useful for our community.

If you want to change the columns additionally, you can use the following selector and try to change flex-basis and max-width:

.hp-template--listings-view-page .hp-listings .hp-grid__item

​I hope this is helpful to you.

[Ardain]

Thanks for suggestion. I recreated it a bit and this is the final working version where anything can be changed specifically as you need.

/* Widen listing container and filter sidebar */
@media screen and (min-width: 1440px) {
    /* 1. Ensure the container's width is expanded */
    .hp-template--listings-view-page .container, 
    .hp-template--listings-view-page .hp-page {
        max-width: 100%;
        width: 100rem; /* Keep the overall width */
    }

    /* 2. Ensure the parent layout uses flexbox */
    .hp-template--listings-view-page .hp-layout {
        display: flex;
    }

    /* 3. Target the sidebar to set a fixed width */
    .hp-template--listings-view-page .hp-page__sidebar {
        flex: 0 0 25rem; /* Sidebar width */
        max-width: 25rem;
    }

    /* 4. Control the width of each listing item for 4 items per row */
    .hp-template--listings-view-page .hp-listings .hp-grid__item {
        flex: 0 0 calc(27% - 1rem); /* Adjust width to account for margin */
        max-width: calc(27% - 1rem); /* Match the flex-basis */
        margin: 1rem -0.2rem; /* Adjust both vertical (top/bottom) and horizontal (left/right) gaps */
    }
}