-
Posts
-
Hello!
1. I Was trying to dial in my sticky button and have read extensively though other threads to try to get my sticky button above other page elements.
In resolutions under 767 pixels wide, Notice the fixed “bring may to my city” button on the right hand of the page is going behind the copy blocks the have either the video or the copy in them. I assume a z-index issue so I set my fixed button as: z-index: 999999!important;
Problem is the text blocks containing the text or videos are still higher than my button (button going behind), any recommendations?2..Also for my mobile resolution specifically (under 767), I have my videos in the text blocks, I have also tried code blocks as opposed to the video elements because its easier for me to implement the AOS scroll animations. I did wrap them inside of color blocks hoping for the videos to go full width. However On my site I have the standard 73%|27% which is probably adding the padding on the left and right. Is their a way for me to make my videos go full width without being a background video of a color block?
Hey todd0218,
1. That button is off screen on all resolutions on my end, it looks a bit strange so I’m not sure I understand your intentions. Could you post a screenshot highlighting what you would like to achieve or try to explain a bit further please?
2. That is difficult unfortunately, since auto play background videos are disabled on mobile, and if you want them to go full width then you would have to set the container to be 100%. That would mean that all other content would go full width as well on mobile, and you would likely have to add a lot of CSS adjustments to compensate for that.
Best regards,
RikardHi Rikard,
Thank you for getting back to me.
Maybe my approach is off which could be part of my problem i did tweak my right position since you last saw it to hopefully make it on the edge of the right side. My intentions are to have a fixed or sticky button that stays against the right side of the page see the “bring may to my city” orange button on the right of the page: http://maymobilitydev.wpengine.com/wp-content/uploads/2020/09/ideal.png (hosted on WPengine)
Ideally i would like it to work similar to the contact centria sticky button shown on the right of the page on this site where its always on top (vertical stacking order) of the rest of the elements on the page: https://centriahealthcare.com/
here is my css for the button.
may-floating-cta {
position: fixed;
top: 46%;
right: 0px;
z-index: 999999!important;
background: #FF9C17;
border: 2px solid #FF9C17;
color: white;
text-align: center;
padding: 10px;
border-radius: 5px 0 0 5px;
transition: all .3s;
line-height: 1.2;
font-weight: 700;
font-size: 12px;
}In addition to possibly helping me with it running off the screen: i would like it so it is on top of all elements on the page (vertical stacking order). You can see in this screen shot where it goes behind the video element http://maymobilitydev.wpengine.com/wp-content/uploads/2020/09/stack-issue.png
2. that was what i was afraid of. I wasnt sure if i could set a class and have them be 100% width or not somehow that i was overlooking.
Hi,
Thank you for the inquiry.
The theme automatically wraps elements inside a container if they are not inside a color or grid section, so applying the z-index directly to the sticky button does not work because it is still inside a section that is lower in the stack order. To fix the issue, try to move the sticky button inside a color section or grid row, then apply the z-index to that element instead of the button. You could also apply a unique class or ID attribute to the section when necessary.
The automatically generated ID of the current section containing the sticky button is after_section_2, so the following css code should also work in case you don’t want to wrap the button in a new section as suggested above.
#after_section_2 { z-index: 999999 !important; position: relative; }Best regards,
Ismael
- The topic ‘Fixed button stacking order issue and making videos full width on mobile.’ is closed to new replies.