I’m the developer of website https://eye-music.com which uses Salient theme 16.2.0 as the parent theme and has a Salient child theme. The artist owner of this site gets a strange portfolio item styling error when he hovers the cursor over an individual portfolio item, which I am unable to duplicate on my end on 3 different browsers (Firefox, Safari, Chrome) on macOS 10.14.6. The owner is running Sonoma (the latest macOS) on his Mac and uses the latest version of Safari - version 17.4.1 (19618.1.15.11.14).
A picture is worth a thousand words, so I've attached a screenshot of what the owner sees when he moves his cursor over a portfolio item. Basically, instead of seeing the normal "View Larger" and "More Details" buttons against the greenish background, he gets a big black box that blocks out most of the green background. The black box is clickable and links to the portfolio item details page. He does not have access to the View Larger button at all, which displays an attractive slideshow within the gallery page.
A couple of more details of things we’ve tried:
He gets the exact same error when I shut off the child theme by activating the Salient parent theme. Also, we were previously running an old Salient theme version (8.0.7) up until about 3 weeks ago, and he was getting the exact same black box error with this old version. I felt confident that if we upgraded to the latest version (Salient 16.1.3 back then and most recently Salient 16.2.0), this would fix the problem. Unfortunately, it didn't - he still gets the same error.
He has flushed out his cache multiple times and reinstalled the latest version of Safari. He still gets the black box when hovering over a portfolio item.
He also displayed the website on his Chrome browser, and the black box did NOT appear. The portfolio pages worked normally when the cursor was hovered over the portfolio item with the two buttons “View Larger” and “More Details” showing up and working correctly.
So far I’ve been unable to resolve this black box error since I’m unable to replicate it on my end, and I would certainly appreciate your help.
The site has many portfolio pages that can be accessed via the Galleries menu item, but here’s a link that will take you directly to one of them:
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: 1025px) {
.portfolio-items .col .work-item .work-info .default-link {
background-color: transparent !important;
}
}
I pasted this CSS under Salient General settings Custom CSS. I need to hear back from the site owner as to whether this clears up the black box problem. I'll let you know one way or the other.
As I mentioned before, I copied and pasted the CSS code you sent me into the Salient Custom CSS area. I finally heard back from the website owner after asking him whether this cleared up his black box issue. Here's what he reported back:
The good news is that the black box is gone, replaced by the blue green box. But there are no buttons to click on the blue green background. He is able to click on the blue green background which links to the detailed view of the portfolio item. There is no option for View Large.
So what he is saying is, the black box is no longer there when he moved the cursor over the portfolio item. Now he is seeing the blue green background, but no buttons for View Large and More Details. The entire blue green background, however, is clickable and this links to the more details single portfolio item page.
Thank you for getting back to us and for your patience on this.
I can't replace this error from our end. Here's a screenshot of the same.
Could you ask the site owner to clear their browser cache and see if the issue persists? Also, if you have installed an auto-optimize plugin, could you try flushing the cache and disabling the plugin and see if the issue persists?
I set the Header Mobile Breakpoint to 1026 (the default value appears to be 1000). I tried setting it to 1025 twice, but for some reason it was forced to 1026. I'd be surprised if this resolves the site owner's problem, but I'll wait to hear back from him. He does appear to have a smaller width viewport on his Mac Book, apparently less than 1025, which is why he's now seeing the blue green background without the black box after I added the CSS code Tahir sent me last Friday. The narrow width of his browser window is reflected by some of the menu items collapsing into 2 lines as seen in Tahir's screenshot whereas with a wider browser window, you see each menu item as one line like in Andrew's screenshot.
However, unlike Tahir's screenshot which shows the View Larger and More Details white labels without the black boxes in the background, the site owner doesn't even see these 2 labels. He sees only the blue green background which is entirely clickable and links to the single portfolio item details page. He sees this in his Safari browser which I believe is the latest available version running on macOS Sonoma - the latest macOS. Very bizarre.
I think I understand what Tahir is saying about this is the intended behavior for this particular viewport size, which is similar to a Tablet size. But there seems to be this strange "in between space" where you still have 3 columns on the group portfolios page just before it collapses into 2 columns and the regular menu is replaced by the mobile hamburger style menu. This collapse from 3 columns to 2 columns appears to happen around 995 px width. The black box background disappears at less than 1025 px due to the CSS code that Tahir recently sent me.
It seems to me that the way it should work is that the 2 attractive buttons (white labels against black background) should appear until you reach the mobile breakpoint at approximately 995 px, and then that functionality disappears (i.e., no more buttons against the blue green background) and is replaced by the mobile functionality. Of course, I have now reset the mobile breakpoint to 1026 to see if this helps with the client's issue.
Finally, Tahir recommends changing the styling of the portfolio projects. Can you explain how I would go about doing this? Are you suggesting that I override some of the CSS code in the portfolio.css file within the salient-portfolio plugin in order to resolve this particular issue? Can you provide any specifics on this? Would I post this CSS code in the Salient general CSS code area?
I am afraid this is a bit more complicated to explain as Ipad and tablet devices use the 1025px viewport.
If your client is still seeing the black box please ask them to clear there browser cache and check again. Though your client is viewing it on a Mac Book the browser is registering it as a touch device and therefore the media query is also getting fired.
I finally resolved this issue by having my client change his screen resolution from the lowest possible setting on his MacBook Pro 15" screen (1024 x 663) to the next higher setting (1280 x 828). The low resolution 1024 x 663 setting was apparently confusing the Salient theme software into thinking it was a tablet device. I removed the CSS code provided earlier by Tahir because it is irrelevant to this issue. I'm glad this has finally been resolved.
Hello,
I’m the developer of website https://eye-music.com which uses Salient theme 16.2.0 as the parent theme and has a Salient child theme. The artist owner of this site gets a strange portfolio item styling error when he hovers the cursor over an individual portfolio item, which I am unable to duplicate on my end on 3 different browsers (Firefox, Safari, Chrome) on macOS 10.14.6. The owner is running Sonoma (the latest macOS) on his Mac and uses the latest version of Safari - version 17.4.1 (19618.1.15.11.14).
A picture is worth a thousand words, so I've attached a screenshot of what the owner sees when he moves his cursor over a portfolio item. Basically, instead of seeing the normal "View Larger" and "More Details" buttons against the greenish background, he gets a big black box that blocks out most of the green background. The black box is clickable and links to the portfolio item details page. He does not have access to the View Larger button at all, which displays an attractive slideshow within the gallery page.
A couple of more details of things we’ve tried:
He gets the exact same error when I shut off the child theme by activating the Salient parent theme. Also, we were previously running an old Salient theme version (8.0.7) up until about 3 weeks ago, and he was getting the exact same black box error with this old version. I felt confident that if we upgraded to the latest version (Salient 16.1.3 back then and most recently Salient 16.2.0), this would fix the problem. Unfortunately, it didn't - he still gets the same error.
He has flushed out his cache multiple times and reinstalled the latest version of Safari. He still gets the black box when hovering over a portfolio item.
He also displayed the website on his Chrome browser, and the black box did NOT appear. The portfolio pages worked normally when the cursor was hovered over the portfolio item with the two buttons “View Larger” and “More Details” showing up and working correctly.
So far I’ve been unable to resolve this black box error since I’m unable to replicate it on my end, and I would certainly appreciate your help.
The site has many portfolio pages that can be accessed via the Galleries menu item, but here’s a link that will take you directly to one of them:
https://eye-music.com/index.php/oliver-art-show/
Have you ever seen this black box error before? Any suggestions?
My contact email address is [email protected] if you'd like to correspond through email.
Thanks, Steven
Attached files: BlackBox-03-28-2024.png
Hey scarey1952 ,
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: 1025px) { .portfolio-items .col .work-item .work-info .default-link { background-color: transparent !important; } }Thanks
ThemeNectar Support Team
Hi Tahir,
I pasted this CSS under Salient General settings Custom CSS. I need to hear back from the site owner as to whether this clears up the black box problem. I'll let you know one way or the other.
Thanks!
Hey Again,
I am able to recreate the issue and therefore provided the CSS which fixes it when i add it to the live browser.
Thanks
ThemeNectar Support Team
That's very encouraging. I haven't been able to recreate the problem so far.
Thanks again
Hello Tahir,
As I mentioned before, I copied and pasted the CSS code you sent me into the Salient Custom CSS area. I finally heard back from the website owner after asking him whether this cleared up his black box issue. Here's what he reported back:
The good news is that the black box is gone, replaced by the blue green box. But there are no buttons to click on the blue green background. He is able to click on the blue green background which links to the detailed view of the portfolio item. There is no option for View Large.
So what he is saying is, the black box is no longer there when he moved the cursor over the portfolio item. Now he is seeing the blue green background, but no buttons for View Large and More Details. The entire blue green background, however, is clickable and this links to the more details single portfolio item page.
Thanks
Hi again,
Thank you for getting back to us and for your patience on this.
I can't replace this error from our end. Here's a screenshot of the same.
Could you ask the site owner to clear their browser cache and see if the issue persists? Also, if you have installed an auto-optimize plugin, could you try flushing the cache and disabling the plugin and see if the issue persists?
We look forward to your reply.
Kind regards,
Hey Again,
What the client is experiencing is the intended behavior on that particular viewport size. See screenshot:
We would recommend you change the styling of the portfolio projects .
Also try increasing the Mobile Breakpoint to load the Mobile/tablet menu earlier:
Thanks.
ThemeNectar Support Team
Hi there,
I set the Header Mobile Breakpoint to 1026 (the default value appears to be 1000). I tried setting it to 1025 twice, but for some reason it was forced to 1026. I'd be surprised if this resolves the site owner's problem, but I'll wait to hear back from him. He does appear to have a smaller width viewport on his Mac Book, apparently less than 1025, which is why he's now seeing the blue green background without the black box after I added the CSS code Tahir sent me last Friday. The narrow width of his browser window is reflected by some of the menu items collapsing into 2 lines as seen in Tahir's screenshot whereas with a wider browser window, you see each menu item as one line like in Andrew's screenshot.
However, unlike Tahir's screenshot which shows the View Larger and More Details white labels without the black boxes in the background, the site owner doesn't even see these 2 labels. He sees only the blue green background which is entirely clickable and links to the single portfolio item details page. He sees this in his Safari browser which I believe is the latest available version running on macOS Sonoma - the latest macOS. Very bizarre.
I think I understand what Tahir is saying about this is the intended behavior for this particular viewport size, which is similar to a Tablet size. But there seems to be this strange "in between space" where you still have 3 columns on the group portfolios page just before it collapses into 2 columns and the regular menu is replaced by the mobile hamburger style menu. This collapse from 3 columns to 2 columns appears to happen around 995 px width. The black box background disappears at less than 1025 px due to the CSS code that Tahir recently sent me.
It seems to me that the way it should work is that the 2 attractive buttons (white labels against black background) should appear until you reach the mobile breakpoint at approximately 995 px, and then that functionality disappears (i.e., no more buttons against the blue green background) and is replaced by the mobile functionality. Of course, I have now reset the mobile breakpoint to 1026 to see if this helps with the client's issue.
Finally, Tahir recommends changing the styling of the portfolio projects. Can you explain how I would go about doing this? Are you suggesting that I override some of the CSS code in the portfolio.css file within the salient-portfolio plugin in order to resolve this particular issue? Can you provide any specifics on this? Would I post this CSS code in the Salient general CSS code area?
Sorry, didn't mean to create such a long post.
Thanks very much for your help.
Steve
Hey Again,
I am afraid this is a bit more complicated to explain as Ipad and tablet devices use the 1025px viewport.
If your client is still seeing the black box please ask them to clear there browser cache and check again. Though your client is viewing it on a Mac Book the browser is registering it as a touch device and therefore the media query is also getting fired.
Thanks.
ThemeNectar Support Team
I finally resolved this issue by having my client change his screen resolution from the lowest possible setting on his MacBook Pro 15" screen (1024 x 663) to the next higher setting (1280 x 828). The low resolution 1024 x 663 setting was apparently confusing the Salient theme software into thinking it was a tablet device. I removed the CSS code provided earlier by Tahir because it is irrelevant to this issue. I'm glad this has finally been resolved.
Steve
How do I close this ticket? It's currently in Open status.
Steve
Hi there,
Not to worry I will close it for you.
Thanks.