Disable buttons for projects section on mobile

Hi,
first, congrats for this theme, pretty amazing and efficient. I’ve managed to do everything I wanted with it.

Except one last thing: when I browse the projects section of my site on a mobile, I must do a first “click” to select it (with the button appearing and the red color over it) and a second to open the link.

I’d like to disable the first click to go directly to the link and only on a mobile.

Could you help me please? Here is the site: http://morgan.1er.free.fr/wordpress
And there is only one button when you hover a project, it’s normal, I already changed this.

Hi,

Very good question. I created custom css code below which you can apply. Although mobile resolutions vary nowadays, for example Apple iPhone 6 Plus will have screen width of 736px in landscape mode. I have set media query to 768px but you can change this as you like.

CSS code provided below will hide both buttons up to resolution of 768px and will display transparent overlay over project image so when you tap it it will automatically navigate to project. Result should look like this http://screencast.com/t/s04ujAYaRSm

@media only screen and (max-width: 768px) {
    .project-image > .link-icon,
    .project-image > .pp-icon {
        transition: none;
    }
    .project-image:hover > .link-icon {
        width: 100%;
        height: 100%;
        left: 0;
        top: 0;
        border-radius: 0;
        background-color: transparent;
    }

    .project-image:hover > .pp-icon {
        display: none;
    }

    .project-image:hover > .link-icon i {
        display: none;
    }
}

Hope it will suit your needs.

Best Regards

Thank you very much for such a quick response.
I tried to do it myself and I can see now I wasn’t this far but a big thanks to you. And I’ll adapt the width to my needs also :slight_smile:

You’re welcome :slight_smile:

Best Regards

Hi !

I have a similar issue with my website www.mathiascrouzet.com : the footer call to action button does not behave properly on mobiles. Would it be possible to simply hide it on those devices ?

@vodkaboy

Hi,

Specify which button from footer do you want to be removed on mobile?

Please, in future, open your own topics and ask questions in corresponding support forum. This is support for Moesia and you are using Perth Pro. Thank you.

Best Regards

I want not to show the call to action widget

@vodkaboy

Hi,

Try with custom css code below:

@media only screen and (max-width:768px) {
    .footer-area div#sidebar-footer .widget.perth_action_widget {
        display:none;
    }
}

Result should look like this http://screencast.com/t/QmH6qDHUFwGe

Best Regards

Works perfectly . Thanks ! :wink: