Hi! I have a row with two columns. In each column there is a Fancy Box. I want the text in the Fancy box to be vertically aligned in the middle. I have set the inner row settings to equal height and content position; middle. But the content is still aligned at the top.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Thanks again. It works fine, but now there is a lot of padding on left and right side the texts that causes unnecessary line breaks. Where can I change that?
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
Hi! I have a row with two columns. In each column there is a Fancy Box. I want the text in the Fancy box to be vertically aligned in the middle. I have set the inner row settings to equal height and content position; middle. But the content is still aligned at the top.
Could need some help. Thank you // Delal
Hey Again,
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.nectar-fancy-box .inner h2 { top: 50% !important; position: absolute; transform: translateY(-50%); }Thanks
ThemeNectar Support Team
Thank you, Tahir for your answer.
I added the code and now the text is vertically aligned. But now the text is aligned to the left instead of centered.
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.nectar-fancy-box .inner h2 { top: 50% !important; left: 50% !important; position: absolute; transform: translateX(-50%) translateY(-50%); }Thanks
ThemeNectar Support Team
Thanks again. It works fine, but now there is a lot of padding on left and right side the texts that causes unnecessary line breaks. Where can I change that?
Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):
.nectar-fancy-box { padding: 13% 5% !important; }Thanks
ThemeNectar Support Team
THANK YOU!