Okay
  Public Ticket #2511993
Set Fancy box max height
Closed

Comments

  •  4
    mkamara started the conversation
    August 20, 2020 at 6:38pm

    Is there a way to set a max height for a fancybox? or change the padding etc?
    I'm using a single fancybox in a contained row with a 'bottom colour bar hover effect', but i need to be a letterbox shape. 

    I only have a small log and a short line of h2 text but the height of the box is too big (see attachment).

    Thanks M

  •  8,851
    Tahir replied
    August 21, 2020 at 10:53am

    Hey Again,

    We do have a Min-Height Field in the Fancy Box Page Element Settings that you can adjust.

    2402348530.pngClick Image to View Larger.

    Thanks

    ThemeNectar Support Team 

  •  4
    mkamara replied
    August 21, 2020 at 12:24pm

    Hi,

    yes I know that, but that's not what I need. That only specifies the min height. I need a way to specify the 'max' height.


    Thanks

  •  8,851
    Tahir replied
    August 21, 2020 at 5:06pm

    Hey Again,

    Adding a Max-height would likely break the Fancy Box Layout. 

    Thanks 

    ThemeNectar Support Team 

  •  4
    mkamara replied
    August 21, 2020 at 5:11pm

    seriously?? even to set it at 300px? i just need to stop it displaying at as size much bigger than needed. If not the height. is there a way to adjust the padding? Surely there must be a way to do this.

    Can you also tell me how to align the content in the box to 'top' rather than default to centre. It's pulling all of the icons out of alignment.

    Thanks

  •  8,851
    Tahir replied
    August 21, 2020 at 5:13pm

    Hey Again,
    Please provide the page URL so I may write up the custom CSS for this request.
    Thanks

    ThemeNectar Support Team 

  •   mkamara replied privately
  •  8,851
    Tahir replied
    August 21, 2020 at 5:27pm

    Hey Again,

    - Remove the 1 Percent Padding in the First Column.

    - 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[data-style="color_box_hover"] .box-inner-wrap {
    padding: 0% 0% !important;
}
.nectar-fancy-box[data-style="color_box_hover"] .inner-wrap img {
    margin: auto !important;
    display: table;
}
.nectar-fancy-box[data-style="color_box_hover"] .inner {
    align-items: start !important;
}

    Thanks

    ThemeNectar Support Team 

  •  4
    mkamara replied
    August 21, 2020 at 5:28pm

    ok thanks will try it now

  •  4
    mkamara replied
    August 21, 2020 at 5:30pm

    it gave me errors..

    See attached

  •  8,851
    Tahir replied
    August 21, 2020 at 5:33pm

    Hey Again,

    You can ignore those.

    Thanks 

    ThemeNectar Support Team 

  •  4
    mkamara replied
    August 21, 2020 at 5:40pm

    ok perfect!!

    Thanks

  •   mkamara replied privately
  •  8,851
    Tahir replied
    August 22, 2020 at 12:45pm

    I am seeing them aligned at the moment with the CSS provided earlier. Are you not seeing them aligned as below ?.

    9383827887.pngClick Image to View Larger.

    Thanks

    ThemeNectar Support Team