Okay
  Public Ticket #452621
Meta from bottom on hover + entire thumb link problem on mobiles
Closed

Comments

  • Geraldine started the conversation
    June 8, 2015 at 1:55pm

    Hi,

    I have chosen "Meta from bottom on hover + entire thumb link" portfolio items as you can see on the link attached, which is great on desktop

    But the trouble is it doesn't appear on mobile devices and if the user doesn't know he has to click on the thumbnail image, he won't see the content of the portfolio item...

    Is there a way to fix it? maybe i did something wrong...

    Thanks for helping

    Regards

    Geraldine


  •  8,990
    Tahir replied
    June 9, 2015 at 6:46pm

    Hey ,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    @media only screen and (max-width: 690px) {
    .portfolio-items .col[data-default-color=\"true\"] .bottom-meta {
        bottom: 0px !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  • Geraldine replied
    June 10, 2015 at 1:26am

    Hi

    Thanks for your answer. I entered the code you gave me.

    You\'ll see on the attached files that\'s working on desktop when I reduce my window (First file) but not on my Iphone (second file).

    I hope you\'ll find a solution

    Thanks again

  •  8,990
    Tahir replied
    June 10, 2015 at 3:08pm

    Hey Again,

    Seems to be working in iphone6 emulation mode.

    Thanks

    ThemeNectar Support Team 

  • Geraldine replied
    June 10, 2015 at 3:56pm

    You\'re right Tahir! It\'s perfect now!!!

    Thanks for your precious support!

  •  4
    Guilherme replied
    September 25, 2015 at 1:47am

    Hi there,

    I also want meta to appear o mobile devices on the porfolio thumbs. But I\'m using the style \"meta on hover + entire thumb link\". Could you give me the right CSS?

    Thanks,

    Guilherme

  •  8,990
    Tahir replied
    September 25, 2015 at 11:51pm

    Page url ?

    ThemeNectar Support Team 

  •  4
  •  8,990
    Tahir replied
    September 26, 2015 at 6:53pm

    Hey Again,

    Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
    @media only screen and (max-width: 690px) {
    .portfolio-items .work-info {
        opacity: 1 !important;
    }
    .portfolio-items .work-info-bg {
        opacity: 0.85 !important;
    }
    
    .portfolio-items .col .work-info .vert-center h3,.portfolio-items .col .work-info .vert-center p {
        opacity: 1 !important;
    }
}

    Thanks


    ThemeNectar Support Team 

  •  4
    Guilherme replied
    September 26, 2015 at 8:31pm

    Thanks a lot!