Several issues with "responsive" ... header video, page width

Hello - I am having several issues with the responsive elements of this awesome theme and was hoping someone could help me troubleshoot beyond what I’ve already attempted. For reference, the website in question is www.brokerderek.com and the issues I am seeing are from my iPhone 6S device and from a 1440p monitor.

1.) The first issue is that the header video does not display on my mobile device. Is this to be expected? If so, then I would like to display a background image instead for screens smaller than “x” width or however.

2.) The second issue is that there is a horizontal scroll bar on the mobile device and the footer image is not scaling down. I have attempted adding several custom @media queries for screens of varying width but I may not be targeting the correct things or even doing it in the right section. I’ve been working within section /* 17. Responsive */ from the main.css file. I have removed the entirety of the footer to see if the image was causing conflict but the issue remains with or without the footer.

3.) The final issue is that the “About Me” title and some of the text from that section disappears UNDER the header video on a 1440p monitor but corrects itself just fine when reduced to a more narrow width. Also some of the sectional background image appear to repeat on this resolution of a monitor, is the image too small? How can we future proof for even wider monitors (think 34" widescreen, etc.) and is this strictly dependent upon the size of the source image?

Forgive me if this is too many questions for one thread, they all seem to revolve around the responsive elements of the theme so hopefully there are some easy fixes. Thanks for helping this CSS noobie out, learning a lot lately… :slight_smile: Attached is a screenshot of the issue from the iPhone 6S, will attempt to upload the 1440p screenshot later when I have access to the machine.

cascad1an

Hello - bumping this request to see if anyone can assist me with any of the issues… mostly concerned about item #2 as listed above, it looks really bad on a mobile device, thank you.

Hi,

Sorry for a late in response, we somehow missed your thread.

  1. Video backgrounds somehow won’t work on mobile devices, I suggest the dev team to add a fallback image when you’re adding a video in the mobile devices, or if they fix this issue to make the video on the mobile devices, either way, I update the dev team with this issue.

  2. Can you share some screenshot about this issue, for now I see no image on the footer or a customized footer.

  3. Please share the screenshot too.

  4. For the iPhone empty side space, can you try access out demo in your iPhone https://colorlib.com/illdy/ and see that also have the empty space?

Let us know,

Thanks,
laranz.

Hi. I have bought the pro version of this theme and as well I’m having similar issues.

Could someone please suggest a work around aside from “Video backgrounds somehow won’t work on mobile devices”?

I’m hacking further into the theme code now, I’d appreciate if anyone who understands the code could chime in and point me in the right direction or right file to make the header video work on mobile.

Thanks.

Hi there

@mycho Sorry but our themes do not have pro versions, maybe you wanted to say something else?
At this moment we cant do nothing here, definitely, this will require some customization. My colleague already addressed this problem to Dev team, either we have to wait for it or it or we must change approach and customize theme or solve this problem by implementing third-party plugins