This listing from this page ([https://taskhive.hivepress.io/services/]()), created with the Hivepress plugin, presents the listing vertically, in 2 columns! I would like to recreate this listing, through css, so that it is horizontal, in just 1 column, exactly the same as this page: [https://experthive.hivepress.io/services/]()
I asked chatgpt and he gave me this answer:
To achieve a horizontal layout for the listing from the first page (`https://taskhive.hivepress.io/services/`) similar to the second page (`https://experthive.hivepress.io/services/`), we can inspect the structure and apply CSS accordingly. Here’s how you can modify the CSS:
1. **Inspecting the Structure**:
* The first page (`taskhive.hivepress.io`) has a vertical layout with services displayed in two columns.
* The second page (`experthive.hivepress.io`) has a horizontal layout with services displayed in a single column.
2. **Applying CSS**:
* We’ll target the elements that control the layout of the services.
Here’s the CSS you can use to transform the vertical layout into a horizontal one:
cssCopiar código/* 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 */
}
I tried this it didn’t work!
Does anyone know any other code I can try?
[ad_2]