I would love to be able to showcase my portfolios in a smaller size and wondered if there was any ability to use a 6 column grid rather than 3 or 4 as this makes the items quite large.
Could you consider using the post grid element. Set the post type option to portfolio then in the column setting use 4. There is no option for 6. Then image size to small.
That's the closest look we can get to the 6 column grid. Hope this is a workable alternative.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
body .portfolio-items[data-gutter="15px"][data-col-num="elastic"], body .portfolio-items[data-gutter="15px"] .col, body .portfolio-items[data-gutter="default"]:not([data-col-num="elastic"]) .col {
width:16.66% !important;
}
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) {
.portfolio-items:not(.carousel) .col.span_4, .portfolio-items:not(.carousel) .col.span_3, .portfolio-items:not(.carousel) .col.span_6 {
width: 50% !important;
}
}
Its showing in 2 columns now in mobile view but the row alignment is bad. Its behaving as if its in masonry style and the alignment is thrown out by some items having longer names. ie
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
@media only screen and (max-width: 690px) {
.portfolio-items[data-ps="9"] .col .work-meta {
min-height: 50px;
}
}
I would love to be able to showcase my portfolios in a smaller size and wondered if there was any ability to use a 6 column grid rather than 3 or 4 as this makes the items quite large.
Is there any CSS that could be used for this?
Hi Jen,
Could you consider using the post grid element. Set the post type option to portfolio then in the column setting use 4. There is no option for 6. Then image size to small.
That's the closest look we can get to the 6 column grid.
Hope this is a workable alternative.
I already have it as a 4 column grid. I need 6 columns and want smaller images. Not sure what you mean below.
Hey,
Please provide the page url so that i can write up the custom css for whats possible.
Thanks
ThemeNectar Support Team
https://staging.selectwellness.com.au/services/
Currently has a few portfolio widgets but all in 4 column grid
Hey AGain,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Thanks
ThemeNectar Support Team
Thanks that looks great. the only thing is that its not working on mobile view and is trying to maintain the 6 columns across (see attached image)
Hey Again,
You can wrap it in a media query if you dont want the css to work on mobile :
Best
ThemeNectar Support Team
no joy on that for me :(
Hey Again,
You need to remove the css earlier provided and add only the latest one.
Best
ThemeNectar Support Team
Ah cool that worked...
Now lastly is there anyway to force it to display as 2 columns for mobile view instead of 1? It makes it all so big
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Thanks
ThemeNectar Support Team
Awesome
now just one more small issue
Its showing in 2 columns now in mobile view but the row alignment is bad. Its behaving as if its in masonry style and the alignment is thrown out by some items having longer names. ie
https://staging.selectwellness.com.au/services/
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Thanks
ThemeNectar Support Team