Tagged: , , ,

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • February 2, 2020 at 10:09 pm #1180706
    Jason

    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

    February 4, 2020 at 5:39 am #1181152
    Nikko

    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

    February 4, 2020 at 5:49 am #1181153
    Jason

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

    February 4, 2020 at 6:06 am #1181157
    Jason

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

    February 4, 2020 at 7:45 am #1181184
    Nikko

    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

    February 6, 2020 at 11:49 pm #1182184
    Jason

    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 years, 10 months ago by Jason.
    February 7, 2020 at 4:17 am #1182224
    Nikko

    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

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