How to stop the resposive resize (height) from the footer « Support Forum | Kriesi.at

Support Forum » Propulsion

How to stop the resposive resize (height) from the footer

7 posts from 3 voices

Started 8 months ago by vansoft1080
Latest reply from Devin
This topic is not resolved

Tags:

vansoft1080
Member

Hi guys,

I'm trying to solve a certain issue with the sizeof the footer on this template. I would like to give a fixed size (height) to the footer without taking into account that this is a HTML5 resposive theme. I have tested the them on a tablet and the footer is huge! almost half of the screen.
Do you know how to solve this? I guess that it's somewhere on the CSS but I'm not able to locate that line.

Best regards and thank you all in advance

Posted 8 months ago #
vansoft1080
Member

Any help please? I would really appreciate it, I'm stuck ^^

Posted 7 months ago #
Ismael
Moderator

Hi vansoft1080,

Kindly post a link to your site, so we can check it further.

Regards,
Ismael

Posted 7 months ago #
vansoft1080
Member

Hi Ismael,

The web site is still in beta phase, It's a project I'm working on it and therefore there is not so much content on it ^^.

http://www.andruinnova.es/

I hope you can help me.

Best regards

Posted 7 months ago #
Ismael
Moderator
Hi vansoft1080,

I checked your site and the reason you see the footer to be so big, is because the html background color is the same color as the footer (that's why the footer looks extended). Try to add this code in your Quick CSS or custom.css:
```
html {
   background: black !important;
}
```
and you'll see what I mean. Just remove this code after you've seen the actual height of your footer.

I think the solution for this is add more elements, so the height will be expanded.

Regards,
Ismael
Posted 7 months ago #
vansoft1080
Member

Hi,

Sorry for the delay. I have already tested to code above and I know what you mean. I think that adding elements will solve the problem but I need to get the footer fixed to button of the page, since I don't want to add more elements.
I was wondering if there is any code to enlarge the content view instead of the footer. I gues that with this, the fotter will remain in the button and a blank space will appear.
Any suggestion for doing this?

best regards,

Posted 7 months ago #

Devin
Moderator

Hi vansoft1080,

Unfortunately not that we can offer via support. The sticky footer is a tricky effect but would need to be custom added to make sure it didn't cause any other issues with the theme.

You could try doing something with min-height and a media query for the various sizes but it will be a lot of trial and error to get exactly what you are looking for. So try:
#top.home #main {min-height: 450px;}

Then you can customize it for the various screen sizes with media queries like this:

/* #Media Queries
================================================== */

  /* Smaller than standard 960 (devices and browsers) */
  @media only screen and (max-width: 959px) {
#top.home #main {min-height: 450px;}
}

  /* Tablet Portrait size to standard 960 (devices and browsers) */
  @media only screen and (min-width: 768px) and (max-width: 959px) {
#top.home #main {min-height: 450px;}
}

  /* All Mobile Sizes (devices and browser) */
  @media only screen and (max-width: 767px) {
#top.home #main {min-height: 450px;}
}

  /* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
  @media only screen and (min-width: 480px) and (max-width: 767px) {
#top.home #main {min-height: 450px;}
}

  /* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
  @media only screen and (max-width: 479px) {
#top.home #main {min-height: 450px;}
}

You can add that big block of css to your custom.css file via FTP. Its located in the css folder of your theme files. Then change the 450px value for each of the screen sizes as you want or need. You can also remove it entirely if needed.