Hi. I'm trying to change the grid layout of my search results page. I'd like it to be a normal block grid with a square picture and meta + type of post under it. Pictures that I upload and that are not square need to be vertically and horizontally alined in the middle.
The salient child theme options panel only supports a masonry grid or list layout.
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):
Thanks for the fast reply. This works. Is it possible to make it compatible with smaller screens. When I shrink the page the blocks stretch out in length.
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.material #search-results .result .inner-wrap img {
max-height: 70vw !important;
object-fit: cover;
}
}
Sorry for the late turn around, we can get overwhelmed sometimes by the number of tickets.
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):
It almost works perfectly. Only when the pictures turn smaller the position is fixed at the top of the picture. Also the number of sentences from the meta data differ and cause the meta data wrap to expend. Maybe it would be possible to make the font size smaller from a certain number of pixels in a screen.
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 (min-width: 1000px) and (max-width:1181px) {
#search-results[data-layout="masonry-no-sidebar"] .result {
width: 33.3% !important;
}
}
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):
Sorry but a problem just turned up. Yesterday I made new product pictures and added them to the website. The photo of the newest product (top left) in my collection page (https://stormvintage.nl/vintageshop/) is now is larger than the picture wrap it normally stays in *when hovering. I think it has to do whit the recent changes we made. I didn't do anything different compared to other photos and products.
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):
Sorry to bother you again but, it feels like new issues are falling out of the sky. The issue now is that I have two WooCommerce elements on my front page (stormvintage.nl) which are now showing all the products instead of the requested number.
Could you allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.
Sorry but I rather not share this information, especially not over the internet. I would like you to help me, which parts of the backend do you want to see?
Could you try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
I'll try that soon. My Wordpress is also giving me some site health notifications. Could these be the cause of the issue? I have been working with Wordpress for 1,5 years now but I am only recently beginning to understand the whole system. I'm not there yet so I really appreciate the help.
These are recommendations normally to keep your site in good health status however they are always minimal or non issues in relation to your site functioning.
I have tried the plugin conflict. I limited the plugins to "Woocommerce", "salient core", Really Simple SSL" and Salient "WPBakery Page Builder". The issue is still there.
Im currently creating a staging site. I'll send you the details as soon as it's ready.
About the search results page, I have now created an archive (sold items) page showing products from a new category "sold", instead of portfolio posts. I want to prioritize the "in stock" products to be at the top of the search results. All items in the "sold" category are marked als "out of stock".
The search result page displays the type of post. All products are now displayed as "Product". I want the products in the "sold" category to show "This item is sold." instead of "Product". And if it's possible to show the requested price of the items that are available. I hope I'm not asking too much of you.
The problem with the theme lasted 5 min. Very strange but it's gone. I asked my hostingservice for a clone of my website but they told me that my disk space if full, so it can't be done unless I upgrade my subscription with them.
I will give it some time and try to figure it out myself. Thanks for the help and I'll be in touch.
I have solved the recent problem with the woocommerce products for now.
I am now trying to give box shadow to a specific row within my footer via CSS. I can't seem to find the right selector, but I managed to implement the change via website Inspection. Can you help me out? The footer is on every page of my website. https://stormvintage.nl
In my website I have used a lot of "nectar-split-heading" elements. They all have an animation which can't be removed in the normal settings. Can you tell me how to hide the animations of all split line headings in CSS?
You can find them on any product page in my website. On the column where "shipping, details and attribution" are shown. These subject are written in split headings. You can see the animation.
So, I new problem just appeared. The pictures on my product page have a lower resolution than before but, this is only the case for the "preview" pictures and for pictures that I uploaded from today. It's strange because, when I click on the magnifying glass, I see the pictures in the correct resolution.
I think it has to do with something else because, I wanted to add new pictures today and when I uploaded them every picture gets an error (doesn't matter the size). I can only see them in my media library after I refreshed the page. You'll find the problem on this page:
Hi. I'm trying to change the grid layout of my search results page. I'd like it to be a normal block grid with a square picture and meta + type of post under it. Pictures that I upload and that are not square need to be vertically and horizontally alined in the middle.
The salient child theme options panel only supports a masonry grid or list layout.
Hey Storm Wilschut,
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):
body.material #search-results .result .inner-wrap img { max-height: 380px !important; object-fit: cover; }Thanks
ThemeNectar Support Team
Hi Tahir,
Thanks for the fast reply. This works. Is it possible to make it compatible with smaller screens. When I shrink the page the blocks stretch out in length.
Cheers
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.material #search-results .result .inner-wrap img { max-height: 70vw !important; object-fit: cover; } }Thanks
ThemeNectar Support Team
Hi Tahir,
I don't see a difference. Media is still full height on smaller screens. It only works on full width screens or mobile ones.
Also when a meta title beneath the picture has 1, 2 or 3 lines a distance is created which makes the masonry visible again.
Hey Again,
Sorry for the late turn around, we can get overwhelmed sometimes by the number of tickets.
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):
body.material #search-results .result .inner-wrap img { position: absolute; width: 100%; top: 0; } .result .inner-wrap>a { width: 100%; position: relative; padding-top: 100%; display: inline-block; overflow: hidden; } body.material #search-results .result .inner-wrap h2 { min-height: 9em; }Thanks
ThemeNectar Support Team
Hi Tahir,
It almost works perfectly. Only when the pictures turn smaller the position is fixed at the top of the picture. Also the number of sentences from the meta data differ and cause the meta data wrap to expend. Maybe it would be possible to make the font size smaller from a certain number of pixels in a screen.
Kind Regards
Storm
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 (min-width: 1000px) and (max-width:1181px) { #search-results[data-layout="masonry-no-sidebar"] .result { width: 33.3% !important; } }Thanks
ThemeNectar Support Team
Okay so the grid is now good. Only the pictures is it are not horizontally aligned in the middle as before.
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):
body.material #search-results .result .inner-wrap img { top: 50% !important; transform: translateY(-50%); }Thanks
ThemeNectar Support Team
Yes. perfect. This really helps me out. Thank you very much Tahir. Hope you have a nice day.
Hi Tahir,
Sorry but a problem just turned up. Yesterday I made new product pictures and added them to the website. The photo of the newest product (top left) in my collection page (https://stormvintage.nl/vintageshop/) is now is larger than the picture wrap it normally stays in *when hovering. I think it has to do whit the recent changes we made. I didn't do anything different compared to other photos and products.
Best Regards,
Storm
Hey Again,
Its likely to do with the CSS minification.
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):
ul.products[data-n-lazy="1"] li.product .product-wrap>a { overflow: hidden; }Thanks
ThemeNectar Support Team
Yes this works, only the middle alignment needs to be fixed now.
Try Regenerating the Thumbnails and check: https://woocommerce.com/document/fixing-blurry-product-images/#:~:text=Regenerate%20Thumbnails. .
Thanks
ThemeNectar Support Team
Sorry to bother you again but, it feels like new issues are falling out of the sky. The issue now is that I have two WooCommerce elements on my front page (stormvintage.nl) which are now showing all the products instead of the requested number.
Could you provide the page url where we can view the issue, from the screenshot it seems you are previewing the page ?.
ThemeNectar Support Team
https://stormvintage.nl/
Could you allow us to log in to your website backend dashboard so we can check on this for you more?. We are gonna need the username and password of admin user as well as the login url.
Thanks
ThemeNectar Support Team
Sorry but I rather not share this information, especially not over the internet. I would like you to help me, which parts of the backend do you want to see?
Could you try testing for a plugin conflict. You can do this by deactivating all third party plugins, and seeing if the problem remains. If it’s fixed, you’ll know a plugin caused the problem, and you can narrow down which one by reactivating them one at a time.
Thanks
ThemeNectar Support Team
hi Tahir,
I'll try that soon. My Wordpress is also giving me some site health notifications. Could these be the cause of the issue? I have been working with Wordpress for 1,5 years now but I am only recently beginning to understand the whole system. I'm not there yet so I really appreciate the help.
Best Regards,
Storm
Hello Storm,
These are recommendations normally to keep your site in good health status however they are always minimal or non issues in relation to your site functioning.
Thanks.
I have tried the plugin conflict. I limited the plugins to "Woocommerce", "salient core", Really Simple SSL" and Salient "WPBakery Page Builder". The issue is still there.
Hey Again, Hope you had a Positive Weekend,
Please setup a staging site so we can help troubleshoot this further.
Thanks
ThemeNectar Support Team
Hi Tahir,
Im currently creating a staging site. I'll send you the details as soon as it's ready.
About the search results page, I have now created an archive (sold items) page showing products from a new category "sold", instead of portfolio posts. I want to prioritize the "in stock" products to be at the top of the search results. All items in the "sold" category are marked als "out of stock".
The search result page displays the type of post. All products are now displayed as "Product". I want the products in the "sold" category to show "This item is sold." instead of "Product". And if it's possible to show the requested price of the items that are available. I hope I'm not asking too much of you.
https://stormvintage.nl/?s=vistosi
Hey Again,
I am afraid this is outside the scope of Theme Support so we would suggest hiring a developer for these Theme Customizations.
Thanks
ThemeNectar Support Team
No problem. I'll try to figure it out later.
Right now the whole theme of the website is gone. Big problem. What can I do???
Seems alright on my end.
Thanks
ThemeNectar Support Team
Hi Tahir,
The problem with the theme lasted 5 min. Very strange but it's gone. I asked my hostingservice for a clone of my website but they told me that my disk space if full, so it can't be done unless I upgrade my subscription with them.
I will give it some time and try to figure it out myself. Thanks for the help and I'll be in touch.
Hi,
I have solved the recent problem with the woocommerce products for now.
I am now trying to give box shadow to a specific row within my footer via CSS. I can't seem to find the right selector, but I managed to implement the change via website Inspection. Can you help me out? The footer is on every page of my website. https://stormvintage.nl
Hi Storm,
You'll need to add a row ID for the row to be unique so that it doesn't apply the changes on other rows which in this case all has the same class id.
You can add a row ID from here so that we can provide css uniquely to this row:
Thanks.
Hi Judith,
It works perfectly, thanks. Have a nice weekend.
cheers
Hi Judith,
In my website I have used a lot of "nectar-split-heading" elements. They all have an animation which can't be removed in the normal settings. Can you tell me how to hide the animations of all split line headings in CSS?
Hope to hear from you soon.
Hi There,
Please share the URL of the page with this animation so that we can provide possible css for it.
Thanks.
Hi,
You can find them on any product page in my website. On the column where "shipping, details and attribution" are shown. These subject are written in split headings. You can see the animation.
https://stormvintage.nl/product/venini-anemone-table-lamp/
Hi There,
Please try this css:
.nectar-split-heading .heading-line>div {transform: none !important;
}
Thanks.
Hi Judith,
This works perfectly. Thanks. Have a nice Christmas and a happy new year.
Hi,
So, I new problem just appeared. The pictures on my product page have a lower resolution than before but, this is only the case for the "preview" pictures and for pictures that I uploaded from today. It's strange because, when I click on the magnifying glass, I see the pictures in the correct resolution.
I think it has to do with something else because, I wanted to add new pictures today and when I uploaded them every picture gets an error (doesn't matter the size). I can only see them in my media library after I refreshed the page. You'll find the problem on this page:
https://stormvintage.nl/product/abatina-table-lamp/
Please let me know how I can fix it.
Kind Regards
Storm
Attached files: Schermafbeelding 2023-04-05 om 13.52.12.png
Schermafbeelding 2023-04-05 om 14.07.42.png
Schermafbeelding 2023-04-05 om 14.08.21.png
Hello Storm,
Please create a new ticket with the new issue so that we are easily able to track the request and respond more effectively.
Thanks.
Oke, I will. Thanks