Archived topic
Page Header Image close to the bottom edge section in larger screens
10 replies · Started by Lúa Louro NIF:78805011L on June 23, 2017
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!
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 :)
Thanks for your help Tom. The website is: [URL deleted]
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;
}
}Thank you Tom! I will try it.
Hi Tom,
This CSS don't work fine in small screens. I'm seeing this in my 13" screen:
Image 1
Image 2
Hmm.. I wonder if this would help:
.page-header-content {
position: relative;
}Not yet... :(
Image
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.
Perfect if I use:
@media (min-width: 1281px) {
.imagehome {
position: absolute;
bottom: 0;
}
}Thanks for your help!
You're welcome :)
