I am trying to push the post-grid element to allow my portfolio projects and blogs to show two columns on mobile rather than just one. It doesn't seem to matter what the element settings are, it always seems to default to one column.
I found this old ticket and tried the snippet provided there, but it didn't seem to make a difference. I'm sure I'm just missing something but wanted to reach out to see if you could help. Is there a better way to adjust for this?
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px){
body .wpb_row .nectar-post-grid[data-columns][data-masonry=yes]>div {
width: calc(50% - 20px) !important;
}
}
That worked, thank you so much! :) Is there any way to keep the border radius for those? Or is it kind of an either one column + border radius OR two columns with no border radius? I know there are limitations for these snippets.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Thank you!! That all worked beautifully for the portfolio items on the Gallery! I am using the same element (post grid) on other pages and would like a similar look (two columns on mobile carrying over the border radius) as well. Is there a reason this snippet would not affect those other pages using this element?
It is for the same site and the pages I would need help with are listed on the menu as the "Locations" and "Blogs" (both listed under "Services" in the main menu). The Post Type on these two is set to "Custom" rather than "Portfolio" like the first , if that helps at all. :) Thank you for all of your help!
The Grid Spacing is different on the other pages which is why different CSS would be needed.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px){
body .nectar-post-grid[data-columns][data-grid-spacing="15px"]:not([data-columns="1"]):not([data-masonry="yes"]) .nectar-post-grid-item {
width: calc(50% - 30px) !important;
}
}
@media only screen and (max-width: 690px) {
body .nectar-post-grid[data-columns][data-grid-spacing="10px"]:not([data-columns="1"]):not([data-masonry="yes"]) .nectar-post-grid-item {
width: calc(50% - 20px) !important;
}
}
I am trying to push the post-grid element to allow my portfolio projects and blogs to show two columns on mobile rather than just one. It doesn't seem to matter what the element settings are, it always seems to default to one column.
I found this old ticket and tried the snippet provided there, but it didn't seem to make a difference. I'm sure I'm just missing something but wanted to reach out to see if you could help. Is there a better way to adjust for this?
Thank you,
Melanie
Hey Melanie ,
Please provide the page url so that i can write up the custom css for whats possible.
Thanks
ThemeNectar Support Team
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px){ body .wpb_row .nectar-post-grid[data-columns][data-masonry=yes]>div { width: calc(50% - 20px) !important; } }Thanks
ThemeNectar Support Team
That worked, thank you so much! :) Is there any way to keep the border radius for those? Or is it kind of an either one column + border radius OR two columns with no border radius? I know there are limitations for these snippets.
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.nectar-post-grid[data-border-radius="10px"] .nectar-post-grid-item .inner,.nectar-post-grid .nectar-post-grid-item-bg img { border-radius:10px !important; }Thanks
ThemeNectar Support Team
Thank you!! That all worked beautifully for the portfolio items on the Gallery! I am using the same element (post grid) on other pages and would like a similar look (two columns on mobile carrying over the border radius) as well. Is there a reason this snippet would not affect those other pages using this element?
The "Post Grid" Page Element settings are likely different.
Please provide the page url so that i can write up the custom css for whats possible.
Thanks
ThemeNectar Support Team
It is for the same site and the pages I would need help with are listed on the menu as the "Locations" and "Blogs" (both listed under "Services" in the main menu). The Post Type on these two is set to "Custom" rather than "Portfolio" like the first , if that helps at all. :) Thank you for all of your help!
Hey Again,
I can view the CSS and the border radius working correctly on both the pages?.
Thanks
ThemeNectar Support Team
Hey Again,
The Grid Spacing is different on the other pages which is why different CSS would be needed.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
@media only screen and (max-width: 690px){ body .nectar-post-grid[data-columns][data-grid-spacing="15px"]:not([data-columns="1"]):not([data-masonry="yes"]) .nectar-post-grid-item { width: calc(50% - 30px) !important; } } @media only screen and (max-width: 690px) { body .nectar-post-grid[data-columns][data-grid-spacing="10px"]:not([data-columns="1"]):not([data-masonry="yes"]) .nectar-post-grid-item { width: calc(50% - 20px) !important; } }Thanks
ThemeNectar Support Team
Oh, ok! I missed that. Thank you so much for all of your help Tahir!!