Hello, can you please help me achieve a small design issue?
Please see the image attached, I'm trying to have an image with the icon/hover behavior (because I need to add the photographer's name). Of the two big images on the left, the first one is just a background in the column, whereas the second is a fancy-box. I wish to have the second one, but the image is cut and even if I adjust the height or the min-height I don't get the image as the original (i.e. the first one). It's all based on the "full-height split section" Salient template.
To assist you better, we'd love to have a closer look at your setup and to do this, we'll need admin login credentials
(dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us?
Try using the CSS below to show the whole image in the fancy box always.
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):
...using backgrond-size:contain would be the most logical solution but it doesn't work. You can see that I have the image as a background but the icon is on top, behaving as if there is an empty placeholder.
Try changing the minimum height for the fancy box on desktop and large screens and see if you can get the fancy box to span the full height of the container.
...when I tried that, for instance with 700 or 800, the image had a bottom-margin... you can see it right now. If I try 1000 then the margin is gone but the image is of course not contained but zoomed
To assist you better, we'd love to have a closer look at your setup and to do this, we'll need admin login credentials (dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us?
Also, please restore the section to how it was before.
Unfortunately, there is no way to increase the minimum height of the flip box without magnifying the background image. You might have to reduce the height of the column.
Try adding the image as the background image of the column and adding the content in the flip box. You can add the icon on the front end and add the text on the back end of the flip box.
...no, I didn't like the flipbox test. After all I just need an icon+text at the bottom of the column, it doens't necessarely need to be animated neither onhover, but I cannot find an element that stays at the bottom. (even "text-with-icon" element doesn't have a position option)
Salient has many options but sometimes they are missing in the most logical places where they should be... :-)
Yes, this is resolved and I'm closing the ticket. It's strange, though, because since I couldn't use the icon I have used just a text element, but I had to assign the flex class to both column and element, otherwise it was not going to stay in the position I wanted.
Hello, can you please help me achieve a small design issue?
Please see the image attached, I'm trying to have an image with the icon/hover behavior (because I need to add the photographer's name). Of the two big images on the left, the first one is just a background in the column, whereas the second is a fancy-box. I wish to have the second one, but the image is cut and even if I adjust the height or the min-height I don't get the image as the original (i.e. the first one). It's all based on the "full-height split section" Salient template.
Any tip?
Attached files: fotocredit.png
Hello Eluvial,
Thanks for writing to us.
To assist you better, we'd love to have a closer look at your setup and to do this, we'll need admin login credentials
(dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us?
If you prefer, you can safely share the access through a one-time secret note or using an access plugin such as Controlled Admin Access.
Before you provide this information, we strongly recommend taking a backup of your site.
If you have any concerns or questions about this process, please don't hesitate to let me know.
Best regards,
Hey Again,
Try using the CSS below to show the whole image in the fancy box always.
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):
.nectar-flickity .nectar-fancy-box[data-n-parallax-bg=true] .box-bg { background-size: contain !important; }Thanks.
ThemeNectar Support Team
...using backgrond-size:contain would be the most logical solution but it doesn't work. You can see that I have the image as a background but the icon is on top, behaving as if there is an empty placeholder.
*edit*
Hello again,
Thank you for getting back to us.
Try changing the minimum height for the fancy box on desktop and large screens and see if you can get the fancy box to span the full height of the container.
Try this and let us know if it helps.
Best Regards,
...when I tried that, for instance with 700 or 800, the image had a bottom-margin... you can see it right now. If I try 1000 then the margin is gone but the image is of course not contained but zoomed
Hello again,
Thank you for getting back to us.
Thanks for reaching out to us.
To assist you better, we'd love to have a closer look at your setup and to do this, we'll need admin login credentials (dashboard URL, username, password) to your site. This will enable us to conduct a more in-depth investigation of the issue based on your specific configurations. Would you mind sharing this with us?
Also, please restore the section to how it was before.
If you prefer, you can safely share the access through a one-time secret note or using an access plugin such as Controlled Admin Access.
Before you provide this information, we strongly recommend taking a backup of your site.
If you have any concerns or questions about this process, please don't hesitate to let me know.
Best regards,
Andrew, I have shared login credantials with your colleague on this very ticket... please check below
Hello again,
Thank you for getting back to us.
Unfortunately, there is no way to increase the minimum height of the flip box without magnifying the background image. You might have to reduce the height of the column.
Try adding the image as the background image of the column and adding the content in the flip box. You can add the icon on the front end and add the text on the back end of the flip box.
Try that and let us know how it goes.
Kind regards,
...no, I didn't like the flipbox test. After all I just need an icon+text at the bottom of the column, it doens't necessarely need to be animated neither onhover, but I cannot find an element that stays at the bottom. (even "text-with-icon" element doesn't have a position option)
Salient has many options but sometimes they are missing in the most logical places where they should be... :-)
Hello there,
Thank you for reaching out to us.
To align the items to the bottom of the page, I have added this extra class to the column to add some custom CSS. Here's a screenshot of the same.
I have also gone ahead and added this custom CSS that will only apply to this page to align the items to the bottom.
You can go ahead and add some padding to the bottom of the column in the column settings to add some extra spacing to the bottom of the column.
Please review and let us know what this looks like from your end.
Best regards,
I'm not that good with Flex, but I have managed to center align it at the bottom.
align-items: flex-end;
justify-content: center;
It's just too bad that the icon I want to use ("linecon-icon-camera") isn't UTD-8'ed
Hello again,
Thank you for getting back to us.
Were you able to sort this issue out? I can see that you were able to move the text to the bottom of the page. Here's a screenshot of this.
Do you still want us to look into this issue for you?
We look forward to your reply.
Thanks,
Yes, this is resolved and I'm closing the ticket. It's strange, though, because since I couldn't use the icon I have used just a text element, but I had to assign the flex class to both column and element, otherwise it was not going to stay in the position I wanted.
Thank you for the help