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… 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