Show listings vertical

[amandasouza3248]

The default listing of the Hivepress plugin is in a horizontal position, with 2 columns, like in Services – TaskHive, right?
I’m trying to make it vertical, with only 1 column, similar to the model of Services – ExpertHive , with css!
I tried:

/* Ensure services are displayed in a single column */
.hp-listing-view.hp-listing-view-grid .hp-listing {
    display: flex;
    flex-wrap: wrap;
}

/* Adjust individual service item styles */
.hp-listing-view.hp-listing-view-grid .hp-listing-item {
    width: 100%; /* Each service takes full width */
    padding: 0 15px; /* Add padding between items */
    box-sizing: border-box;
}

/* Ensure each service item aligns properly */
.hp-listing-view.hp-listing-view-grid .hp-listing-item .hp-listing-item-body {
    display: block; /* Reset to block to prevent horizontal overflow */
    width: 100%;
}

/* Ensure images and titles align correctly */
.hp-listing-view.hp-listing-view-grid .hp-listing-item .hp-listing-item-body .hp-listing-item-header {
    width: 100%;
}

/* Adjust the title size and margin */
.hp-listing-view.hp-listing-view-grid .hp-listing-item .hp-listing-item-body .hp-listing-item-header .hp-listing-item-title {
    font-size: 18px; /* Adjust title font size */
    margin-bottom: 10px; /* Add space between titles */
}

but it didn’t work!
How could I make it the same?

[andrii]

Hi,

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

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://fvrr.co/32e7LvY

[amandasouza3248]

Thank you!
I tried to insert this code, but it doesn’t work!
It only reduced the size of the images.
The columns remain in 2, horizontally.

[web.silvarodrigo]

You can do this in CSS with just the code “DISPLAY” reference:

CSS Grid Layout I did it on mine, with the display you can easily manipulate this, I’ll see if I can make a video to post.

Whatever, call me here and I’ll tell you.