Hi, I'm looking for help on the screenshot attached. I'm trying to anchor the buttons to the bottom of the card while the top content stays at the top.
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Hi - I just wanted to relay that the CSS below does work for the bottoms being bottom aligned but the code also corrupted a lot of other designs around the site. Is there a way to really isolate the css to those specific boxes??
Yes you can isolate the Row by adding the "row-id" to the CSS selector as below:
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
Hi, I'm looking for help on the screenshot attached. I'm trying to anchor the buttons to the bottom of the card while the top content stays at the top.
Any help would be much appreciated!
Thank youuuuuu,
Seth
Attached files: Screenshot 2024-08-05 at 4.41.13 PM.png
Hey Again,
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
.vc_row.vc_row-o-equal-height>.span_12>.wpb_column>.vc_column-inner>.wpb_wrapper { min-height: 100% !important; display: flex; flex-direction: column; } .vc_row.vc_row-o-equal-height>.span_12>.wpb_column.wpb_column .nectar-cta { margin-top: auto !important; }Thanks
ThemeNectar Support Team
Bingo Bango! That's done it. Many thanks! :)
Hi - I just wanted to relay that the CSS below does work for the bottoms being bottom aligned but the code also corrupted a lot of other designs around the site. Is there a way to really isolate the css to those specific boxes??
Cheers!
Hey Again,
Yes you can isolate the Row by adding the "row-id" to the CSS selector as below:
Add this into the Custom CSS box in your Salient Theme Options panel (We write all Custom CSS in the Live Browser to ensure accuracy. If you cannot see any changes, make sure there is no red cross in the Custom CSS Box as any syntax error would cause all CSS under that line of code to not show up on the Frontend):
#row-id.vc_row.vc_row-o-equal-height>.span_12>.wpb_column>.vc_column-inner>.wpb_wrapper { min-height: 100% !important; display: flex; flex-direction: column; } #row-id.vc_row.vc_row-o-equal-height>.span_12>.wpb_column.wpb_column .nectar-cta { margin-top: auto !important; }Thanks
ThemeNectar Support Team
PERFECT! Thanks so much.