Full Height Footer Widgets

  • Resolved lesanis

    (@lesanis)


    8 years, 4 months ago

    Hello Tom,

    Congratulations for this amazing theme!!! You Have created a lightweight theme that gives unlimited possibilities to create almost everything!!! I have used it to create so so different websites that all look awesome..I need your help please with an issue that I have… I have made footer widget 2 and footer widget 4 backrounds colored and I would like to give them fullheight and extend them till the copyright line. How could I do that? I have tried:

    div.footer-widget-2.grid-parent.grid-25.tablet-grid-50, div.footer-widget-4.grid-parent.grid-25.tablet-grid-50{ 
background:rgba(0,0,0,0.5);
height:100%!important;}

    but unfortunately nothing changes… Here is an image of what I would like to achieve
    Screenshot

    Thank you!!

    • This topic was modified 8 years, 4 months ago by lesanis.
Viewing 11 replies - 1 through 11 (of 11 total)
  • Theme Author Tom

    (@edge22)

    Hi there,

    I’m glad you’re enjoying the theme!

    Hmm, very tough question. To be honest, I don’t think this is possible without using javascript (maybe) to determine the height of the empty space and apply it to the widgets.

    I don’t think it would be possible with just CSS, even if you used Flexbox.

    I’m sorry I can’t be more helpful!

    Thread Starter lesanis

    (@lesanis)

    Hello Tom,

    Thank you for your response!!Could it be possible to give me an example? I think I can insert a javascript script in my child theme’s header but I do not know how to “determine the height of the empty space and apply it to the widgets”. Could you help me with that?

    Thank you again,
    lesanis

    Theme Author Tom

    (@edge22)

    Honestly I’m not even sure what the best way to do it with JS would be in this case. It might be worth asking over on https://stackoverflow.com/.

    Let me know if you find help there ??

    Thread Starter lesanis

    (@lesanis)

    Yes, I will try asking over on stack overflow. If I find a solution I will inform you Tom!

    Thank you!!

    Theme Author Tom

    (@edge22)

    No problem! Inform me if you don’t find a solution as well ??

    Thread Starter lesanis

    (@lesanis)

    Hello Tom,

    I have found a very easy solution I think…. The solution is to expand the box shadow same color as footer widget 2 and footer widget 4 background till the footer of the page. So the code is

    @media (min-width: 1025px) {
div.footer-widget-2.grid-parent.grid-25.tablet-grid-50, div.footer-widget-4.grid-parent.grid-25.tablet-grid-50 {
    box-shadow: 0 500px rgba(0, 0, 0, 0.7);
}}

    Now the problem is that when the window minimizes (tablets and mobiles) the 4 columns become 2 or 1 and the box shadow is overlapping over the other widgets. In my window it’s changing at 1025px but I do not know if it is globally correct. So I have set that as min-width for the code to work. Can you confirm? The four columns are changing from 4 to 2 at 1025px?

    And the other issue is that it is overlapping the footer too. I have tried the code

    .site-info {
    z-index: 999999999999!important;
}

@media (min-width: 1025px)
div.footer-widget-2.grid-parent.grid-25.tablet-grid-50, div.footer-widget-4.grid-parent.grid-25.tablet-grid-50 {
    box-shadow: 0 500px rgba(0, 0, 0, 0.7);
    z-index: 0!important;
}

    but unfortunatelly it is not working. Do you have any suggestions?

    Thank you,
    lesanis

    Theme Author Tom

    (@edge22)

    Hi there,

    Interesting solution!

    That’s correct, the footer widgets will change the grid at 1024px.

    Can you possibly link me to what you have now so I can play with the CSS?

    Thread Starter lesanis

    (@lesanis)

    Hello,

    Yes,of course! I am sending you now an email with the link Tom.

    Thank you again,
    lesanis

    Theme Author Tom

    (@edge22)

    You could try this:

    .site-info {
    position: relative;
}
    Thread Starter lesanis

    (@lesanis)

    Woww, that did the trick! Thank you so much Tom!!!!!!!

    Theme Author Tom

    (@edge22)

    You’re welcome ??

Viewing 11 replies - 1 through 11 (of 11 total)
  • The topic ‘Full Height Footer Widgets’ is closed to new replies.