One column /vertical attributes listing page

General HivePress
1

Hello
First thank you for this awesome theme. I m still experimenting the free version and was wondering if there is a way the attributes to be listed vertically in the listing page instead of 2 columns set up . I know this was already brough up back on Nov 22. I tried the Code snippet provided but there was no changes. so I m wondering if there is any updated resolution. As raised by many users, the moment the attributes have a certain value type ( like start date/end date ) or has few selections criteria, it messes the layout up and the professional display. Thank you

Resources used : How to add custom code snippets - HivePress Help Center

.hp-listing--view-page .hp-listing__attributes--secondary .hp-col-lg-6{
    flex-basis:100%;
    max-width:100%;
		-ms-flex-preferred-size: 100%;
}
3

Hi,
Please make sure that you added this snippet correctly, it should be added in Appearance/Customize/Additional CSS field. It sets a single column layout for secondary attributes (under the listing image slider) on the single listing page.

4

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.

5

Hello,

On the desktop view of my listings page, the attributes in each listing card are in two columns, but I want them to be in a single column. Initially I also had the same issue on mobile view, but I managed to fix it with this code:

body.home .hp-listing–view-block .hp-listing__attributes \[class\*=“hp-col-”\],
.post-type-archive-hp_listing .hp-listing–view-block .hp-listing__attributes \[class\*=“hp-col-”\] {
flex-basis: 100% !important;
max-width: 100% !important;
width: 100% !important;
padding-right: 0 !important;
margin-bottom: 6px !important;
}

However, when I tried to replicate the same for bigger screens, the trick didn’t work.

I’ve used the browser inspector and found in “Styles” that the same rule in grid.min.css is causing the two-column layout:

media only screen and (min-width: 75em) {
.hp-col-lg-6 {
-ms-flex-preferred-size: 50%;
flex-basis: 50%;
max-width: 50%;
}
}

I have tried to override it with the following code in ‘Additional CSS’, but it has no effect:

.post-type-archive-hp_listing .hp-listing–view-block .hp-listing__attributes–secondary .hp-col-lg-6 { flex-basis: 100% !important;
max-width: 100% !important;
}

I have cleared all caches and confirmed there are no syntax errors. Live-editing the flex-basis and the max-width to 100% in the browser inspector works perfectly, but the ‘Additional CSS’ rule is being ignored.

Can you please tell me the correct selector or method to override this style? Thank you.

6

Hi,

Please see the solution in this topic.