Community Forums › Forums › Archived Forums › General Discussion › Infinity Pro Front-Page-x widgets
- This topic has 4 replies, 3 voices, and was last updated 7 years, 3 months ago by Becky Bruso.
-
AuthorPosts
-
December 19, 2016 at 6:16 am #197783Becky BrusoMember
Hi-
I am working on creating multiple call to action buttons on my front-page-1 widget. The multiple buttons are too large to display on mobile and therefore I would like to hide all but one on most mobile devices. I have created selectors for each of my call-to-action buttons and can hide and show them selectively. The issue is that on the smaller devices, the button is not clickable on the portrait setting of the device.
My front page widget code is as follows:
<p>Make A Reservation
Buy A Gift Card
View Our Menu </center>The style-front.css code for these is:
#reserve.button {
visibility:visible;
}
#gift.button {
visibility:visible;
}
#ourmenu.button {
visibility:visible;
}
I set up media queries to show the #reserve.button on mobile as follows :
@media only screen and (max-width: 460px) {#reserve.button {
visibility:visible;
}
#gift.button {
visibility:hidden;
}
#ourmenu.button {
visibility:hidden;
}
}
I know I am missing something in my code or don't have it right. Can anyone offer any suggestions?Thanks.
http://preview.bizpalwebsandbox.com
BeckyDecember 21, 2016 at 4:37 am #197934Victor FontModeratorThe most common reason for a button not to be clickable on small devices is because there is another element overlapping it. You need to check z-index of the button and nearest elements.
BTW, I noticed that your code is using the old center tag. Center is not supported in HTML5. It has been deprecated. http://www.w3schools.com/TAgs/tag_center.asp
Regards,
Victor
https://victorfont.com/
Call us toll free: 844-VIC-FONT (842-3668)
Have you requested your free website audit yet?December 21, 2016 at 6:24 am #197937SecusMemberTo me, looking at your site using the inspector in Chrome and an "iPhone 6 plus" it looks like it's "front-page-2" that is covering your buttons.
I can hardly see the buttons as it is right now, that might be different though on a real iPhone 6 plus.
Before:
#front-page-2 {border-top: 73px solid transparent;margin-top: -73px;}
Try to remove the above styles.Secondly, change the 'position' on ".video-container"
#front-page-1.video-container{position: initial;}
After:
--
LarsDecember 27, 2016 at 6:11 pm #198307Becky BrusoMemberHi Lars- Thanks - I want to hide the buttons on the mobile portrait views or only show one as there is not enough space. Especially for iphone 5s. I hesitate to remove the code for the border-top as it is core from the infinity design; the theme has the following:
.front-page-2,
.front-page-3,
.front-page-4,
.front-page-5,
.front-page-6,
.front-page-7 {
border-top: 73px solid transparent;
margin-top: -73px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
position: relative;
z-index: 9;
}When I have removed it i the past from the front-page-2- I wound up with a larger undesired gap. what I really want to do is hide the buttons.
thank you though.December 27, 2016 at 6:23 pm #198308Becky BrusoMemberVictor- I just checked and none of the elements have a z-index assigned except for the front-page-1, front-page-2, front-page-3, front-page-4, front-page-5, front-page-6, and front-page-7: which all have a z-index of 9. Thanks for pointing out the center html deprecation. The code wasn't final and will be translated to css for the final project.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.