Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #1180706

    hi there,
    this will be a css issue, & i should be able to sort myself – but can’t for the life of me see it, so i’m hoping you might be able to point me in the right direction.
    if you look at this site on mobile, the our work section doesn’t change to a blue background when touching the screen, however the thoughts section does.
    i’d like the our work section to have the blue background – like the thoughts section does.
    can you help me sort this out?
    thanks heaps,
    Jason

    #1181152

    Hi Jason,

    :hover doesn’t really cover touch in mobile devices, I tried to look for something that could be helpful and I found this in stackoverflow: https://stackoverflow.com/questions/22559756/changing-hover-to-touch-click-for-mobile-devices#answer-22560108
    Please try to use :active as well.
    Let us know if this helps.

    Best regards,
    Nikko

    #1181153

    brilliant – thank you Nikko, i’ll take a look & report back :)

    #1181157

    yes, it worked, in my case i used:
    .slide-entry:active .slide-image {background:#1d2553;}

    #1181184

    Hi Jason,

    That’s really great to hear and we’re glad that we could help :)
    Let us know if you need further assistance or if we can mark this as resolved.

    Best regards,
    Nikko

    #1182184

    no, i’m wrong – didn’t work. it seems there’s a pseudo class which handles the display of the title, & the change of background color.

    .grid-entry a:hover::before {
        content: attr(title);
        position: absolute;
        width: 100%;
        z-index: 1000;
        text-align: center;
        opacity: 1;
        font-size: 18px;
        color: 
        #fff !important;
        transform: translateY(-50%);
        animation: avia-fadein .75s 1 cubic-bezier(0.175,0.885,0.320,1.275) !important;
        top: 50%;
        display: flex !important;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
    }

    this is showing the title on mobile – but not changing the background color. i’ve been trying unsuccessfully to sort this, can I use :active with :before ?
    can’t seem to get this to work no matter what i do – help?

    i’ve even tried this
    #top a .grid-image.avia-hover-fx:active {background:#1d2553!important;}
    while i’m here should the rule go inside, or outside of a media query – given this is only mobile we’re targeting, i’d have thought inside – is that correct?

    • This reply was modified 4 months ago by  Jason.
    #1182224

    Hi Jason,

    Yes you are correct, if you just want to have that change only in mobile device then the right decision should be putting it inside the media query.
    As for the background color, please add this CSS code inside the media query :)

    #top .grid-entry .image-overlay .image-overlay-inside:before, 
    #top .grid-entry .image-overlay .image-overlay-inside:active {
        background-color: #1d2553 !important;
    }

    Best regards,
    Nikko

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.