-
-
Hi there,
My client has discovered an inconsistency across different browser windows with the way the PORTFOLIO page (masonry grid view) is displaying when you hover on the images.
On FIREFOX, the hover is correct, there is a white overlay with headings (see image below), while on SAFARI, the hover is NOT showing the overlay or headings consistenly (see second image below).
Staging url is: https://helen.wilgatree.com/articles/FIREFOX:
https://postimg.cc/image/iblbhu88h/
SAFARI:
https://postimg.cc/image/nzrm8r7g1/
Are you able to help me correct this display issue in Safari?
Thanks
Helen -
Hello,
Sorry for the delay.
Please add these lines in your Custom Css box:.portfolio-item.overlayed:hover .overlay .bg { opacity: 1.0 !important; } .portfolio-item.overlayed .overlay .bg { opacity: 1.0 !important; -webkit-transition: all .3s ease-in-out !important; -moz-transition: all .3s ease-in-out !important; -ms-transition: all .3s ease-in-out !important; -o-transition: all .3s ease-in-out !important; transition: all .3s ease-in-out !important; }
If the situation persists, add some valid wp credentials in a private reply. So i can give it a closer look.
Best regards!
-
-
Hi, I have a question about the text in the overlay hover, that sometimes the text would appear out of the box. Any solution to this issue?
The website is http://www.ausunfinance.com.au.
The issue happens under the achievement page. Thx
-
Hello,
@Freedonut, Please add his code into your Custom Css box in General Options:.portfolio-item.overlayed h4 { font-size: 14px !important; }
Change the font until you are satisfied with the result.
PS: For future questions, please open your own tickets!
Best regards!
- This reply was modified 5 years, 8 months ago by Mirela.
-
Hi,
Thx for the reply, though I’m not complain about the font size. What I’m saying is that sometimes for long address, instead of showing in two lines, it’ll be displaying out of the box. Like the image showing below.
-
Hello,
Add this code instead:
.portfolio-item.overlayed .overlay .center-bar { margin-left: 10px !important; width: 80% !important; top: 45px !important; }
Result: https://postimg.cc/image/t4gvqkjqf/
Change the values to your wish.Best regards!
-
Now that all the text are not in the right place, I still want text to be in the middle and center.
-
Hello,
Just change the values until you are satisfied with the result.
Best regards!
-
Also, when I switch to mobile view, the text is way off.
-
Hello,
For mobile screen, add this code instead:
@media (max-widht: 480px){ .portfolio-item.overlayed .overlay .center-bar { margin-left: 10px !important; width: 80% !important; top: 45px !important; }}
Of course, you have to change the values again to your wish.
Best regards!
-
You must be logged in to reply to this topic.