[Support request] Video background media query

[Rafael]

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

[Leo]

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

[Rafael]

@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

[David]

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

[Rafael]

@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”.

[Fernando]

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.

[Rafael]

@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.

[Fernando]

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.

[Author]

Posts