Stick element to bottom side

Question

on my shop I have a green bar that I would like to stick to the bottom side (and the pink bar underneath it would be set to display:none)

http://www.screencast.com/t/v0IG2rWNlb

Example of product page on which it appears (site is responsive so you can mimic mobile view with playing with the frame of your window) https://www.tresor-ethnique.com/collections/tibetain/products/pendentif-arbre-de-vie

I have tried :

.prod_form.prod_form_footer.sticky_addcart #AddToCart {
    bottom: 0px;
    padding-bottom: 0px;
    margin-bottom: 0px;
}

This green bar won't stick to the bottom side ....

You have any idea? Any help would be appreciated, thanks :)

You need to give it position: fixed – ecg8 Feb 24 '18 at 03:37 — ecg8, Feb 24 '18 at 03:37

score 0 · Answer 1 · answered Feb 24 '18 at 04:47

0

Hey Pascal i looked into your url and here is your problem set the display property of pink to hidden and there is a parent to your green element which has the property of top: 0!important; remove that and you are good to go.

answered Feb 24 '18 at 04:47

Ravi Kumar Taneja

91
4

I have applied for just mobile and it worked! (conflict with parent indeed) thank you :) – Pascal Feb 24 '18 at 13:29

score 0 · Answer 2 · answered Feb 24 '18 at 05:30

0

.pink-bar{ display: none; }
.green-bar{
    position: fixed;
    bottom: 0
}

This CSS may help you. as this will hide your pink bar and fixed the green bar to bottom

answered Feb 24 '18 at 05:30

Zainul Abideen

1,829
15
37

I have applied for just mobile and it worked! (conflict with parent indeed) thank you :) – Pascal Feb 24 '18 at 13:29

Stick element to bottom side

2 Answers2