Moving footer up on mobile

  • Resolved robertschaef

    (@robertschaef)


    4 years, 8 months ago

    Hi guys,

    Thank you so much for an awesome plug-in! You’ve made it super simple to set up, but still extremely flexible and easy to customize.

    On mobile (tested on an iPhone 8 Plus, specifically) the footer appears below the bottom of the viewport, meaning that you have to scroll down to see it. From a UX standpoint, it seems like it would be best for the footer to be visible without scrolling. I don’t have a lot of content on the page that is filling vertical space and thus requiring the page to scroll.

    I’ve searched through the support topics but can’t find anything that moves the content up and keeps the page from scrolling on mobile. Can you offer some advice?

    Thanks in advance!

    • This topic was modified 4 years, 8 months ago by robertschaef.
Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Author Ales

    (@alesmal)

    Hello, thanks for reaching out!

    You are right, footer is pushed below the viewport on some themes, becase of the browser fixed height.

    What CMP Theme are you using, I can suggest a quick fix.

    Ales

    Thread Starter robertschaef

    (@robertschaef)

    Thanks for the quick response Ales. I am using the Hardwork theme.

    Plugin Author Ales

    (@alesmal)

    @media only screen and (max-width : 560px) {
	body {min-height:initial}
	.section-body {
		min-height: calc(100vh - 11em - 55px);
	}
}

    Try this custom CSS ??

    Ales

    Thread Starter robertschaef

    (@robertschaef)

    Thanks so much Ales, this worked great on iPhone 8 Plus!

    However, it isn’t responsive to other mobile screen sizes. For example, on an iPhone XS, there is now white space below the footer. On an iPhone 8, for example, there’s an even larger white space.

    Any recommendations on making the footer responsive to the bottom of the viewport?

    Plugin Author Ales

    (@alesmal)

    Unfortunately that cannot be simply resolved as every mobile phone as different height od the mobile browser tab..

    You can play with those 55px and make a good compromise, but it cannot be resolved without a some custom javascript ..

    min-height: calc(100vh - 11em - 55px);

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Moving footer up on mobile’ is closed to new replies.