switch off overlay in mobile version

Home › Forums › Jevelin Theme › switch off overlay in mobile version

Home › Forums › Jevelin Theme › switch off overlay in mobile version

Viewing 10 posts - 1 through 10 (of 10 total)
  • Author
    RESOLVED Posts

  • Ly
    Participant

    Hi,

     

    I’m done with my website so far and now adapt the mobile version. Here I noticed that I do not need an overlay (the hover effect) for my individual projects in the portfolio. So I wanted to ask if it is possible to switch off the overlay of the individual projects ONLY in the mobile version?

     

    Greetings, Ly

    Shufflehound Support
    Moderator

    Hi Ly,

     

    Thank you for your question.

     

    You can try achieving this using Yellow Pencil editor as described in the below page.

     

    https://support.shufflehound.com/how-to-change-almost-any-element/

     

    Best regards,
    Shufflehound team

    Ly
    Participant

    Thanks for the quick answer, but unfortunately I do not know how to solve my problem with the YellowPencil. I know how to use it (I’ve used it many times before).

    But how should I make a setting with the YellowPencil, which should be only for the mobile version?

    Shufflehound Support
    Moderator

    You need to use Yellow Pencil responsive tool as described in the following page to adjust styling for mobile.

     

    https://waspthemes.com/yellow-pencil/documentation/#responsive-tool

     

    Also could you please share me the page URL from your site where it is displaying so that I can help you to achieve it?

    Ly
    Participant

    Ah ok, now I found the tool for change only in the mobile version. Unfortunately, I do not know which settings I have to make. I would be grateful for help.

    Shufflehound Support
    Moderator

    You can remove it by adding the following CSS code in the Custom CSS code option of your theme on the below path.

     

    Admin Area -> Appearance -> Theme Settings -> Custom Code -> CSS Code

     

    @media only screen and (max-width: 768px) {
.sh-portfolio-overlay-style-overlay4 .sh-portfolio-image:hover .sh-portfolio-overlay4 {
    display: none;
}
}

    Ly
    Participant

    Super thank you. The principle does what it should do. But the projects are no longer “clickable”: there is no forwarding to the individual project (with additional pictures and the corresponding text for the project).

    Is it possible to access the individual project pages without overlay?

    Shufflehound Support
    Moderator

    Solution for this topic

    Please try changing above shared CSS code as following.

     

    @media only screen and (max-width: 768px) {
.sh-portfolio-overlay-style-overlay4 .sh-portfolio-image .sh-portfolio-overlay4 {
    background: transparent !important;
}

.sh-portfolio-overlay-style-overlay4 .sh-portfolio-image .sh-portfolio-overlay4 .sh-portfolio-overlay4-categories,
.sh-portfolio-overlay-style-overlay4 .sh-portfolio-image .sh-portfolio-overlay4 .sh-portfolio-overlay4-title {
    display: none;
}
}

    Ly
    Participant

    This works perfectly!!!

    Thank you so much 🙂

    Shufflehound Support
    Moderator

    You are most welcome here 🙂

  • Author
    Posts
Viewing 10 posts - 1 through 10 (of 10 total)