Support » Theme: Storefront » Text Over hero video

  • Resolved Daniel

    (@marketinggreenpaint)


    Hello,

    As you can read from the title I have a problem where text goes over my hero video.
    The thing is, it only happens on safari, no other browser. How can I fix this to make it look like the other browsers?

    Hope you can help me.
    Thank you in advance,
    Daniel

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Hey there,

    I’ve taken a look but I haven’t been able to reproduce the issue – there’s no overlap when I check in Safari.

    Can you post a screenshot of what you are seeing? What version of Safari are you using, and what OS are you on?

    Daniel

    (@marketinggreenpaint)

    Hello @fevered
    I am using the following:

    OS X EL CAPITAN 10.11.6
    Safari 11.1.2
    Screenshot here https://imgur.com/BWoPiAW

    What do you think? 🙁

    Okay, in that case I suspect it may be due to the Safari version you are using. For reference, I am not seeing the issue and I am using:

    OS X Catalina 10.15.2
    Safari 13.0.4

    Do you have access to test this on a more recent version of Safari?

    Daniel

    (@marketinggreenpaint)

    Hey @fevered ,

    I do have access to a more recent version, but only in 12 hours from now. As soon as I test it out, I will post here again letting you know.

    Thank you very much for your help with this issue.

    Daniel

    (@marketinggreenpaint)

    @fevered Sorry for the delay answering.
    I have since checked a more recent version of the OS and the browser itself and it works fine as you said. BUT it only works on the latest version, I have tried on other catalina version and safari and its still hovering. Is there any solution to this? What I mean is I have developed the website for my current version and at some point in time it did work. Any idea? 😀

    Thanks for your help and once again I am sorry for the delay.

    fevered

    (@fevered)

    I’m glad you were able to check! Compatibility can be a tricky issue, since I am not able to see it on my own machine I can’t provide any exact code but I can provide some advice – and perhaps someone else in the community has a similar version and can provide some code.

    I know Safari treats video differently than other browsers, and in your case I would recommend coding some CSS specifically for Safari – I found some snippets for that here: https://solvit.io/bcf61b6

    My guess here would be that Safari is not treating the video as a block object, which is causing the text to overlap. In your Safari specific CSS, I would either find a way to force the video to be a block object, or add some padding or margins to the text so that it is lower than the video.

    Daniel

    (@marketinggreenpaint)

    @fevered Thank you once again for your answer.
    I am going to leave this topic open for a few days to see if anyone can help with code, but I doubt it, since its open for a while now.

    Tyvm 🙂

    Daniel

    (@marketinggreenpaint)

    @fevered I actually ended up managing to do it myself and fixing the problem with this code:

    @media not all and (min-resolution:.001dpcm) { 
        @media {
            .entry-content { 
              margin-top: 100px;
            }
        }
    }

    I did try the code on Solvit.io but it wasn’t working.

    Thank you 🙂

    fevered

    (@fevered)

    I’m glad to hear you were able to find a solution!

Viewing 9 replies - 1 through 9 (of 9 total)
  • You must be logged in to reply to this topic.