Skip to main content
Inspiring
May 16, 2025
Answered

Incorrect page view on mobile device

  • May 16, 2025
  • 2 replies
  • 512 views

Hello,

I created a home page with a moving image in the background following an online tutorial. The page looks good on PC browsers, but when viewed on a mobile screen,, a couple of things are happening. The video isn't running, and the logo is out of place. Any suggestions how to fix it?

https://royalblue-nightingale-726846.hostingersite.com/index.html 

 

    Correct answer Nancy OShea

    See my cautionary statements about Splash pages below.

     

    Horizontally & Vertically Centered using CSS Flexbox.

    Use whatever body background color & image you wish.

    This layout is responsive on all devices. 

     

     

    2 replies

    Nancy OShea
    Community Expert
    May 16, 2025

    Just a word of caution about so-called splash or intro pages. They are the kiss of death for search engine ranking.

     

    Your domain's landing page is the single most important page on your website. It's the first impression that people see on web searches. In the absence of real content to index, SERPs will display nothing about you or what you offer. That's a wasted opportunity.

     

    A well-crafted landing page contains plenty of keyword-rich content that tells people who you are, what you do, and why you are important. Content should generate interest & site traffic.  'Click here to enter' links have no value to you or your site visitors.

     

    This screenshot shows what you're competing with on Google.  It's an impressive first look on the SERP with content gathered from the site's Home page. 

    Something to think about...

     

    Good luck with your project.

     

    Nancy O'Shea— Product User & Community Expert
    Kevin E.Author
    Inspiring
    May 16, 2025

    Hi. Yes, I know intro pages have gone by the wayside, but it is what the person I am helping wants. 

    Nancy OShea
    Community Expert
    May 16, 2025

    It's your job to talk clients out of stupid decisions.  

    If they refuse to listen, make them sign a waiver so they can't come back to bite you later. 😉

     

    Nancy O'Shea— Product User & Community Expert
    Nancy OShea
    Community Expert
    May 16, 2025

    "Autoplay" is ignored by most mobile devices and many desktop browsers because it's invasive and consumes excessive bandwidth.  There's not much you can do about end-user devices and browser settings. 

     

    As an alternative, replace video with an animated WebP or Gif to use as your background-image.

    https://ezgif.com/webp-maker

     

    As for the logo, remove the CSS marked in red.

    #ODMLogo {
    margin-left: 35%;
    position: relative;
    z-index: 50;
    margin-top: 27%;
    text-align: center;
    text-shadow: 9px 9px;
    float: none;

     

    Hope that helps.

     

    Nancy O'Shea— Product User & Community Expert
    Kevin E.Author
    Inspiring
    May 16, 2025

    Thank you. 
    I removed the code and the logo is now centered and at the top, but still is separate from the background. Anything else I can try?

    Nancy OShea
    Nancy OSheaCorrect answer
    Community Expert
    May 16, 2025

    See my cautionary statements about Splash pages below.

     

    Horizontally & Vertically Centered using CSS Flexbox.

    Use whatever body background color & image you wish.

    This layout is responsive on all devices. 

     

     

    Nancy O'Shea— Product User & Community Expert