Mobile issue: Footer text displaying over homepage image.

net1994

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.

rainforest1155

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.

net1994

@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?

Hikin' Mike

@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;
  }

} 

net1994

@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?

Hikin' Mike

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;
  }

} 

net1994

@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?

Hikin' Mike

@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.

net1994

@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!