-
Posts
-
I have my home page with a Masonry element, with the setting “Display Title” and “Display on mouse hover”. It works perfectly on my PC (Google Chrome) and shows the titles only on mouse hover, as it should, regardless of window size.
However, on my mobile phone (Nexus 5, Google Chrome), it always shows the titles for the Masonry, which I do not want. Because of the title style, it now covers half of the picture in some cases, which doesn’t look good.
Hi Rickard!
Thank you for using Enfold.
The title is set to display by default on mobile devices because as we know mobile devices doesn’t support hover state. You can hide it with this:
@media only screen and (max-width: 767px) { .av-masonry-entry .av-masonry-entry-title { display: none !important; }}Regards,
IsmaelThank you for your response. However, the code only hides the text when I try it on my mobile device. The white “block” with the short “arrow” is still there, and thus covers up part of the picture (and the purpose from the beginning was to not have it cover up the picture). I guess moving the white block to below the picture would also be an acceptable solution.
Hey!
Please try to replace the previous code with the following:
@media only screen and (max-width: 767px) {
.av-masonry-entry .av-masonry-entry-title, .av-inner-masonry-content {
display: none !important;
}
}Cheers!
Rikard
- The topic ‘Masonry titles shown when they shouldn't’ is closed to new replies.