Hoping that someone can help. I am having this issue with responsiveness and layout on the Products Page.
I want a video to play in the background but from what I understand it doesn’t work on mobile. So I have a still image as the background for the section. I then placed the video on top and I turned off the visibility for mobile so that only the image and not the video is seen on these devices.
It looks fine in desktop but the on tablet & horizontal mobile modes the second section disappears. In the mobile version Section disappears entirely.
I think that if you change your hierarchy/structure, it will be easier to manipulate the video element.
Don’t place all the elements inside the Background Video element, instead, place them in a sibling div so when you hide/unhide the background video, it does not affect the other elements in the section.
I did that and it is still not working. Now my interaction on the K stopped working. It was working fine and now it seems like it zeroed out the values I had set. When I try to set the new values, they do not work.
The change you did to the video is the 1st step. Now it is possible to hide it without affecting the other elements. The 2nd step you should do is to make sure all the elements behave as you want them to.
The 100vh section does not have 100vh height…
I am aware. What I name a section doesn’t matter. Please ignore what I named sections. What is important are the settings. Whether the settings for that section are set to auto or to 100vh, it doesn’t matter, I’m still having the same problem.
When you look at the desktop version, Section 100vh has an image (name riskman.jpg) as its background. On top of that there is a video (legworkBgVideo). Visibility is turned on for both. There are not problems with this until I get to the mobile horizontal view in the designer. In the mobile horizontal view, I have the visibility of the video turned off so that the background image for the section shows with no video. However, the background image can only be seen when the designer is set to its max width of 767px. Whenever you resize to 480 (the smallest width), the image disappears and is no longer visible only the text “Don’t risk it” that sits on top is visible. In the mobile vertical view, the image is not seen at all; not at 479 px or 240 px.
Ok, so I did understand your problem, and I did give you the solution.
The image is set as background image for the section 100vh FlexVertical. This section is set to have relative position and 100vh height at the desktop view. When you go to tablet view and smaller screens, you change the properties of this section. You remove it’s height, and you change position to static. These changes makes the section height become 0.
If you want the video & images in this section to be visible - you have to give some elements inside the section height, or give the section itself height or relative position.
