[Resolved] Page Header Image close to the bottom edge section in larger screens

[Lúa Louro NIF:78805011L]

Hi!

I have headers with 2 columns. On the left column, I have a image. In small screens the image location is perfect: it bottom border it the same like the section bottom border. Great!

Problem is in larger screens (20″ and more), because de header has an style=”height: 628px”. If I put style=”height: initial !important” I have no problem 🙂

Larger Screens: https://www.dropbox.com/s/ciz5c2hpuj7yu9p/1.png
Small Screens: https://www.dropbox.com/s/kdexy6bnkknxurc/2.png

I have detected that style is generated by parallax.min.js, specifically the line jQuery(".fullscreen-enabled").css("height",b-c+"px"). My question is… How can I change that?? Thanks!

[Tom]

You might need to make the image position:absolute and force it to the bottom. If you’d like to link me to the page I may be able to help with the CSS 🙂

[Lúa Louro NIF:78805011L]

Thanks for your help Tom. The website is: [URL deleted]

[Tom]

If you remove the full screen option, it should happen automatically.

However, you can force it with this CSS:

@media (min-width: 769px) {
    .imagehome {
        position: absolute;
        bottom: 0;
    }
}

[Lúa Louro NIF:78805011L]

Thank you Tom! I will try it.

[Lúa Louro NIF:78805011L]

Hi Tom,

This CSS don’t work fine in small screens. I’m seeing this in my 13″ screen:
Image 1
Image 2

[Tom]

Hmm.. I wonder if this would help:

.page-header-content {
    position: relative;
}

[Lúa Louro NIF:78805011L]

Not yet… 🙁
Image

[Tom]

Try this instead:

@media (min-width: 1025px) {
    .imagehome {
        position: absolute;
        bottom: 0;
    }
}

Since you have your content set to 100% width on tablet, we need to only apply absolute positioning on desktop.

[Lúa Louro NIF:78805011L]

Perfect if I use:

@media (min-width: 1281px) {
    .imagehome {
        position: absolute;
        bottom: 0;
    }
}

Thanks for your help!

[Tom]

You’re welcome 🙂

[Author]

Posts