Archived topic
Video background media query
7 replies · Started by Rafael on December 10, 2022
Hi,
I have a Video background, when I add html to create Buttons and a Media size, the layout shifts.
/*BUTTONS Home Video*/
.button_video, .button_video:visited {
color: #ffffff;
background: transparent;
font-size: 16px;
padding: 12px 22px 12px 22px;
border: 2px solid #ffffff;
}
.button_video:hover,
.button_video:active {
background: #C58639;
color: #ffffff;
border: 2px solid transparent;
}When I add @media (max-width: 860px) and (min-width: 240px) {
The Layout goes crazy.
Here is the Element for the Video background:
<video loop muted autoplay playsinline poster="https://www.ra.com/wp-content/uploads/2020/02/feautured_image.jpg" class="background-video" id="myVideo">
<source src="https://cdn.raf.com/wp-content/uploads/2020/02/video_back.mp4" type="video/mp4">
<source src="https://cdn.raf.com/wp-content/uploads/2020/02/video_back.webm" type="video/webm">
<source src="https://cdn.raf.com/wp-content/uploads/2020/02/video_back.ogv" type="video/ogv">
</video>
<div class="background-video-content">
<p style="text-align: center;"><a class="button_video" href="sms:1323385">Text Message</a>
<a class="button_video" href="mailto:rafa.com?subject=Magic Inquiry!"><span>Email Us</a></p>
</div>How do I add code so the Buttons only appear on Mobile and the layout doesn't shift??
Thanks
Hi there,
How do I add code so the Buttons only appear on Mobile
Can you add two more classes with the button_video like:
button_video hide-on-desktop hide-on-tablet
@Leo
I added the extra classes to the Element
<div class="background-video-content">
<p style="text-align: center;"><a class="button_video hide-on-desktop hide-on-tablet" href="sms:1323">Text Message</a>
<a class="button_video hide-on-desktop hide-on-tablet" href="mailto:raf@raf.com?subject=Magic Inquiry!"><span>Email Us</a></p>
</div>Do I also add something to the CSS. If so, what does it look like?
I also added: @media (max-width: 860px) and (min-width: 240px) {
If you resize my website in a browser, you can see that the Video background shifts down in desktop size. Instead of it being aligned to the top.
I noticed that at 861px, .page-hero { has paddings.
padding-top: 300px;
padding-bottom: 300px;
Rafael
Hi there,
edit the header element, and adjust the top and bottom padding values on the Page Hero tab:
https://docs.generatepress.com/article/header-element-overview/#page-hero
@David
Navigate my site and the rest of the pages are fine.
I Excluded the Home Page in the Display Rules and its still setting a Hero padding of 300px. I think its the "Offset Site Header Height".
Hi Rafael,
To clarify, if you open your Header Element displayed on the Front page, and go to the Page Hero section, what value is the top padding for Desktop view?
Example: https://share.getcloudapp.com/bLuOje8n
If it's not 0, can you try setting it to 0?
If it's already set to 0, let us know.
@Fernando
I messed with settings. I fixed stuff but I found another error.
I think the issue is the frontpage .page-hero has no padding between 769px-860px in the Video background of the home page.
That should fix the problem.
I see. You added this code: https://docs.generatepress.com/article/page-hero-background-video/#:~:text=Now%20that%20our%20HTML%20is%20set%20up%2C%20we%20can%20add%20the%20CSS%3A inside a media query.
Try removing them from the media query, and then add a top and bottom padding for both Desktop and Mobile views. This should fix the issue.
