• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

The footer goes up because of pictures

We have this we page :(https://rolostack.co.il/עמודי-נחיתה/).
You can see that the footer goes up because of the long pictures.

Is there a way to fix it?
We tried `position:fixed` , but then the footer gets sticky.

we want it to be like that:

tnx for help
I see that it is WordPress, have you installed everything correctly, plugins, theme etc?

I have moved this to a better section.
 
I'll see if I can look into this. So you added the pictures or was it there before, how did it react without them?
I added the pictures, but also adding them to the fotter was perfectly fine.
only when i did the effect that when you hover with your mouse the picture goes up then the fotter goes up...
 
Perhaps trying reducing how much the picture goes up?
I don't really understand what do you mean....i can't reducing how much she goes up because whoever enters has to see everything...
If you look at the other site I submitted, you will see that they have long images but they do not reach the bottom
 
I solved this with this:
this for the image wrapper:

CSS:
selector {

    overflow: hidden;

    height: 400px;

}



and this css on the image:



selector:hover {

    margin-top: 400px;

    transform: translate(0,-100%);

    transition-timing-function: ease;

    transition-duration: 3s;

}
 
Last edited:
I don't really understand what do you mean....i can't reducing how much she goes up because whoever enters has to see everything...
If you look at the other site I submitted, you will see that they have long images but they do not reach the bottom
What I mean is how much did you set the image to go up when you hover over it.


I solved this with this:
this for the image wrapper:

selector {
overflow: hidden;
height: 400px;
}

and this css on the image:

selector:hover {
margin-top: 400px;
transform: translate(0,-100%);
transition-timing-function: ease;
transition-duration: 3s;
}
Glad you figured out the problem! Thanks for sharing it as well. Can you please wrap the code in our BBCODE. You can do this by clicking (...) then selecting Code.
 
Just to let you know, you could have also done it like this with Elementor's custom CSS.
Code:
[data-elementor-type='footer']{

bottom:0;

position:absolute;

}

The page you linked still does not show the footer on the bottom for me, so I figured I would share my solution to help :)
 
Top Bottom