Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • April 16, 2015 at 7:53 pm #429850
    hoqui

    How can I define the transparency of the title/excerpt background of Masonry portfolio items on MOBLE DEVICES?
    On desktop I used the following CSS-code to give transparency to title – background on hover.

    .av-masonry-entry:hover .av-inner-masonry-content{
    opacity: 0.7 !important;
    }

    But on mobile devices, the title which shows always remains with opacity 100%.
    How do I determine opacity also for title element on mobile devices?
    I looked around in the forum for a long time without finding a solution. Thank you for your help to make Enfold perfect for me.

    April 17, 2015 at 4:45 pm #430397
    Elliott

    Hey hoqui!

    I can view your site on desktop but when I try with any of my mobile devices your site does not load at all. Can you double check?

    Best regards,
    Elliott

    • This reply was modified 9 years ago by Elliott.
    April 17, 2015 at 5:17 pm #430450
    hoqui
    This reply has been marked as private.
    April 20, 2015 at 2:13 pm #431272
    hoqui

    Did you succeed in displaying the site? Do you see, that on mobile devices, the title and excerpt are always showing with opacity 100%. I would like to change opacity ot those tites on the bottom of each portfolio item.
    Thank you again for your help.

    April 20, 2015 at 2:21 pm #431277
    Yigit

    Hi!

    Yes, i can see it now. Thank you for the clarification. Can you please try adding following code to Quick CSS 

    @media only screen and (max-width: 500px) {
.av-fixed-size .av-masonry-entry .av-inner-masonry-content, .av-caption-on-hover .av-masonry-item-with-image.av-masonry-entry .av-inner-masonry-content {
  position: absolute !important;
}}

    Regards,
    Yigit

    April 23, 2015 at 11:59 am #433387
    hoqui

    Hi Yigit, didn’t see your reply at once, sorry.
    I inserted your CSS quick-code but no change of opacity of title/excerpt banners (I dont see opacity command in your code)
    Perhaps we misunderstood each other.
    For desktop browsers:
    I changed opacity of title/excerpt banner in masonry gallery showing on mouse hover on bottom part of each gallery item with CSS 

    .av-masonry-entry:hover .av-inner-masonry-content{
    opacity: 0.7 !important;
}

    On mobile devices though, those banners with portfolio item title and excerpts always show (ok,there is no mouse over on touchscrrens) but they remain with white background opacity 100%. (Only on click they become transparent for a second befor going to linked portfolio item).
    Can you try to help again? Thank you

    April 25, 2015 at 11:32 am #434667
    Andy

    Hi!

    well to be honest I am not sure about which part of your masonry you are talking about. A screenshot would help a lot I think (imgur.com, public dropbox).
    However, if you want to control the code from your first post for mobile devices then try this:

    @media only screen and (max-device-width: 736px) {
.av-masonry-entry:hover .av-inner-masonry-content{
opacity: 0.7 !important;
}}

    Hope this is what you are searching for.

    Best regards,
    Andy

    April 27, 2015 at 10:45 am #435131
    hoqui

    Hi Andy,
    thanks for keeping up with this threat and for trying to help. I posted two screenshots
    1. Masonry gallery on desktopbrowser with mouse : Title and excerpts showing with partial transparency on mouse over. http://imgur.com/LnFawMk
    2. Masonry gallery on mobilebrowsers with touch: Title and excerpts showing always but with complete opacity covering the project image. http://imgur.com/K4uAByL
    I want the title and excerpt showing on mobile devices with touch screens to be also semi transparent in order to show the project image underneath.
    pageaddress: http://www.quickpartners.net/?page_id=121
    I tried your CSS code but without desired result. When clicking on a gallery item, then title becomes transparent for a short moment just before leaving the page to go to cllicked portfolio item. On page load project title banners have opacity 100% instead of 70%.

    April 28, 2015 at 7:39 pm #436321
    Andy

    Hey!

    I can see this code on your website:

    @media only screen and (max-device-width: 736px)
.av-masonry-entry:hover .av-inner-masonry-content {
opacity: 0.7 !important;
}

    which is controlling the caption’s opacity on mobile phones smaller than 736px. You can adjust the value for opacity if you want or increase the max-device-width, so it will even work for tablets, e.g.:

    @media only screen and (max-device-width: 1024px)
.av-masonry-entry:hover .av-inner-masonry-content {
opacity: 0.4 !important;
}

    Hope this make things clear.

    If you still need help with it please provide us admin access.

    Cheers!
    Andy

    April 28, 2015 at 8:23 pm #436348
    hoqui
    This reply has been marked as private.
    April 29, 2015 at 10:42 am #436572
    hoqui

    Hi Andy,
    waiting for your response in the meanwhile I tried to figure out how it could be done to change transparency of the title/excerpt banner on the bottom of each project in masonry gallery on mobile devices. I don’t have a clue about CSS but the following code works!

    .av-inner-masonry-content.site-background {
opacity: 0.7 !important;
}

    It changes transparency of the title banners in masonry gallery to 0,7 on mobile devices with touch screens. If the CSS code used seem critical to you for other reasons, please let me know.
    Thank you anyways for your help and for trying to find a solution. Your and Kriesi’s support in general is outstanding and really gives great value to your theme !!!!

    April 29, 2015 at 12:34 pm #436616
    Andy

    Hi!

    thank you very much!

    Glad you did it! Your code looks good and when you add media querries into it, you can be sure it only effects a specific screen size, for example:

    @media only screen and (max-device-width: 1024px) {
.av-inner-masonry-content.site-background {
opacity: 0.7 !important;
}}

    Best regards,
    Andy

  • Author
    Posts
Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.