Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
  • #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,


    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:
    Please try to use :active as well.
    Let us know if this helps.

    Best regards,


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


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


    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,


    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;
        #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 years ago by Jason.

    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,

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