travelI'm on Holidays until the 21 august.

The questions posted during this period will receive no answer, so please be patient and wait before posting in the forum. Thank you

New registrations are suspended during this period

Je suis en vacances jusqu'au 21 aout.

Je ne répondrai à aucune question postée durant cette période. Merci d'attendre mon retour. Merci

Les inscriptions sur le site sont suspendues pendant cette période

 

Welcome, Guest
Username: Password: Remember me
  • Page:
  • 1

TOPIC: Force footer to bottom of screen

Force footer to bottom of screen 05 Jun 2017 23:53 #42668

I have a site (actually numerous) where I want the footer to be at the bottom of the screen. www.ckdev.info/sedona is the current one.

The footer wrapper has a 50% #000000 color applied to it. I made 2 copyright module positions - one for desktop, one for mobile devices and assigned them in responsive. I searched the net (try not to bug you with every query!!) and found some code so added this to the module in the wrapper:

position: absolute;
bottom: 0;
left: 0;
right: 0;

Pushed it to the bottom, but deleted the color in the footer on desktop. I did not add to mobile as it will always bee at the bottom. Displays fine on mobile. So I added the code to the wrapper instead of the module position. This time the desktop was fine, but the mobile, not surprisingly, shows the footer at the bottom of the screen and stays in that position on the page.

It's kind of like the opposite of the sticky header but not quite. What am I doing wrong Ced?

Thanks.

EDIT: Actually, just found that this doesn't work, period. It fails on desktop if the page is longer than the screen too - just like on mobile. This may be a great widget to add. I would use it all the time.

Please Log in to join the conversation.

A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!
Last Edit: by trogladyte.

Force footer to bottom of screen 06 Jun 2017 08:32 #42682

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 17656
  • Karma: 391
  • Thank you received: 2263
Hi
remove your position absolute, this is not the solution
Try something like this in the paremeters >> custom css
#wrapper {
    min-height: calc(100vh - 100px);
}

CEd

Please Log in to join the conversation.

Joomlack Webmaster and Developer

Force footer to bottom of screen 06 Jun 2017 08:33 #42683

  • ced1870
  • ced1870's Avatar
  • Offline
  • Administrateur
  • Administrateur
  • Posts: 17656
  • Karma: 391
  • Thank you received: 2263
PS : you can adapt the 100px value to get the best result

Please Log in to join the conversation.

Joomlack Webmaster and Developer

Force footer to bottom of screen 06 Jun 2017 18:37 #42721

Thanks Ced. Changed the 100px to 10px and it looks great.

Thanks again!!

Please Log in to join the conversation.

A good landing is one you can walk away from.
A great landing is one where you can reuse the aircraft!
  • Page:
  • 1
Time to create page: 0.288 seconds

Fast and powerful creation, customizable and responsive.

Read More

Qui est en ligne

We have 338 guests and no members online