Mobile issue: Footer text displaying over homepage image.

net1994net1994 Major grinsPosts: 269Registered Users Major grins
edited December 26, 2018 in SmugMug Support

Hi All - Please see below. I don't have any issues on my website when viewed on a desktop. Any ideas on how to fix? I want to show the text at the bottom of the page. This was on a Android device with OS 8.0 in a Chrome browser. I haven't tried on an iphone, but wouldn't be surprised if I see the same thing.

Candy For Your Eyes @ Paint By Pixels

http://www.paintbypixels.com

Comments

  • rainforest1155rainforest1155 SmugMug Support Hero Posts: 4,492Registered Users Major grins

    Hi there,
    The way your site is currently, it appears you turned OFF the "collapse for mobile" setting on your menu and thus the menu doesn't collapse on small screen devices. That means it's covering more of your background homepage slideshow.
    In addition, it appears you added your footer text twice - once as part of the side bar (which will cover more of the slideshow as it'll always be below the menu (collapsed or not). The second is part of the actual footer.

    To get more what you're looking for on small screen devices, I'd recommend to enable "collapse for mobile" for your menu and to remove the text content block you added in your side bar. Just leave the one in your footer on the entire site.

    If you're still not happy with the results, write back here after you've applied the changes so we could take a closer look.

    Sebastian
    SmugMug Support Hero
  • net1994net1994 Major grins Posts: 269Registered Users Major grins

    @rainforest1155 said:
    Hi there,
    The way your site is currently, it appears you turned OFF the "collapse for mobile" setting on your menu and thus the menu doesn't collapse on small screen devices. That means it's covering more of your background homepage slideshow.
    In addition, it appears you added your footer text twice - once as part of the side bar (which will cover more of the slideshow as it'll always be below the menu (collapsed or not). The second is part of the actual footer.

    To get more what you're looking for on small screen devices, I'd recommend to enable "collapse for mobile" for your menu and to remove the text content block you added in your side bar. Just leave the one in your footer on the entire site.

    If you're still not happy with the results, write back here after you've applied the changes so we could take a closer look.

    Hi Thanks Rainforest for the suggestions. I did what you suggest, and the footer text is still overlayed over the background image. Is there something else I could try?

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,235Registered Users Major grins

    @net1994 said:

    @rainforest1155 said:
    Hi there,
    The way your site is currently, it appears you turned OFF the "collapse for mobile" setting on your menu and thus the menu doesn't collapse on small screen devices. That means it's covering more of your background homepage slideshow.
    In addition, it appears you added your footer text twice - once as part of the side bar (which will cover more of the slideshow as it'll always be below the menu (collapsed or not). The second is part of the actual footer.

    To get more what you're looking for on small screen devices, I'd recommend to enable "collapse for mobile" for your menu and to remove the text content block you added in your side bar. Just leave the one in your footer on the entire site.

    If you're still not happy with the results, write back here after you've applied the changes so we could take a closer look.

    Hi Thanks Rainforest for the suggestions. I did what you suggest, and the footer text is still overlayed over the background image. Is there something else I could try?

    Add this to your theme's custom CSS section:

    @media only screen and ( max-width: 736px ) {
    
      .sm-page-initialized .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {
        position: fixed;
        bottom: 0;
      }
    
    } 
    
  • net1994net1994 Major grins Posts: 269Registered Users Major grins

    @Hikin' Mike said:

    @net1994 said:

    @rainforest1155 said:
    Hi there,
    The way your site is currently, it appears you turned OFF the "collapse for mobile" setting on your menu and thus the menu doesn't collapse on small screen devices. That means it's covering more of your background homepage slideshow.
    In addition, it appears you added your footer text twice - once as part of the side bar (which will cover more of the slideshow as it'll always be below the menu (collapsed or not). The second is part of the actual footer.

    To get more what you're looking for on small screen devices, I'd recommend to enable "collapse for mobile" for your menu and to remove the text content block you added in your side bar. Just leave the one in your footer on the entire site.

    If you're still not happy with the results, write back here after you've applied the changes so we could take a closer look.

    Hi Thanks Rainforest for the suggestions. I did what you suggest, and the footer text is still overlayed over the background image. Is there something else I could try?

    Add this to your theme's custom CSS section:

    @media only screen and ( max-width: 736px ) {
    
      .sm-page-initialized .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {
        position: fixed;
        bottom: 0;
      }
    
    } 
    

    Hi Mike! Well that helped somewhat. I is keeping the footer at the bottom of the screen on phone. However what it's now doing is when you go into a gallery and scroll through it (up or down), the text sit's on top of the the photos as they move by. They kind of float there on top. Once I open up pics in a slide show, it's no longer there. Any way to just force it to always be at the bottom of the page when in a mobile browser?

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,235Registered Users Major grins
    edited December 29, 2018

    Use this instead.

    @media only screen and ( max-width: 736px ) {
    
     .sm-page-home .sm-page-initialized .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {
        position: fixed;
        bottom: 0;
      }
    
    } 
    
  • net1994net1994 Major grins Posts: 269Registered Users Major grins

    @Hikin' Mike said:
    Use this instead.

    .sm-page-home .sm-page-initialized .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {
      position: fixed;
      bottom: 0;
    }
    

    Closer! Now on the mobile device it's doing what I want. Either on the home page or in galleries. But now on the desktop, and only on the homepage, the text is aligned to the left at the bottom. But if I go into a gallery or any other part of the site, it's centered like it should be. Just the homepage on the desktop is amiss. Any ideas?

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
  • Hikin' MikeHikin' Mike Walkin' like a Penguin! Atwater, CaPosts: 4,235Registered Users Major grins

    @net1994 said:

    @Hikin' Mike said:
    Use this instead.

    .sm-page-home .sm-page-initialized .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {
      position: fixed;
      bottom: 0;
    }
    

    Closer! Now on the mobile device it's doing what I want. Either on the home page or in galleries. But now on the desktop, and only on the homepage, the text is aligned to the left at the bottom. But if I go into a gallery or any other part of the site, it's centered like it should be. Just the homepage on the desktop is amiss. Any ideas?

    I edited the code.

  • net1994net1994 Major grins Posts: 269Registered Users Major grins

    @Hikin' Mike said:

    @net1994 said:

    @Hikin' Mike said:
    Use this instead.

    .sm-page-home .sm-page-initialized .sm-page-content > .sm-page-layout > .sm-page-layout-region-footer {
      position: fixed;
      bottom: 0;
    }
    

    Closer! Now on the mobile device it's doing what I want. Either on the home page or in galleries. But now on the desktop, and only on the homepage, the text is aligned to the left at the bottom. But if I go into a gallery or any other part of the site, it's centered like it should be. Just the homepage on the desktop is amiss. Any ideas?

    I edited the code.

    That did it! Thanks for your help and patience!

    Candy For Your Eyes @ Paint By Pixels

    http://www.paintbypixels.com
Sign In or Register to comment.