Infinity Pro — Multiple Text widgets for repsonsive

[Becky Bruso]

Hi-

I am trying to show/hide the multiple buttons I have placed on front-page-1 widget with a single one for mobile devices. I have created a unique selector for each of these buttons and am able to show/hide these with various media queries. The only issue i am running into is that the button in not clickable on the portrait mobile view.
Has anyone had any experience with selectively displaying a button for a mobile or responsive?

My front-page-1 widget code is as follows:
<p>Make A Reservation
Buy A Gift Card  
    View Our Menu    </center>

My style-front.css is #reserve.button {
visibility:visible;
}
#gift.button {
visibility:visible;
}
#ourmenu.button {
visibility:visible;
}
one of media queries is as follows:

@media only screen and (max-width:412px) {
/*may have too many of these media queries*/
#reserve.button {
visibility:visible;
}
#gift.button {
visibility:hidden;
}
#ourmenu.button {
visibility:hidden;
}
}

I am sure that I am probably missing something here or have left out a setting. If anyone has any experience or ideas with doing this, please let me know.
Thank you.
Becky

http://preview.bizpalwebsandbox.com

[Christoph]

Hi Becky,

The background video seems to be shown on mobile devices. That´ll make people with limited data packages pretty angry.
Is there a reason you are using the visibility property instead of display?
The (responsive) height adjustment for the video section cuts off the text and buttons. Maybe declaring a min-height somewhere can help...

---

https://www.christophherr.com | Genesis Customizations | Buy me a coffee

[Becky Bruso]

Christoph- Thanks for your reply. I was just beginning with testing the concept of only showing one button on mobile devices. I hadn't finalized the css yet and can see where display : none ( which takes up no space) as opposed to visibility:hidden ( which does) is a better choice.

When using Chrome dev tools, it looks like it will play on mobile, but I have found that it does not play on my iphone 5s. This article notes that video's on mobile are not played by design via mobile o/s code: https://www.aerserv.com/why-does-video-autoplay-on-mobile-devices-not-work/ What mobile device did you find it was playing on for you?

Thanks.

Becky

[Susan]

I'm closing this, as it appears to be a duplicate of this post: http://www.studiopress.community/topic/infinity-pro-front-page-x-widgets/

[Author]

Posts