Okay
  Public Ticket #1491661
Fancy Box Resizing
Closed

Comments

  •  2
    IgnyteGroup started the conversation
    March 5, 2018 at 2:49pm

    Hello,

    For the fancy box element, sometimes when the browser is resized to certain dimensions a box's content is cut off. 

    This is happening on a couple of pages where I am using the element and I am unsure how to fix it. 

  •  3,034
    Andrew replied
    March 5, 2018 at 7:50pm

    Hey there,

    Thanks for reaching in,

    I've replicated the issue and resizing different sizes of the browser the fancy boxes look alright. Can you please clear your cache and let me know if the issue still persists.

    Regards

  •  9,014
    Tahir replied
    March 6, 2018 at 11:46am

    Also you seem to have the PageSpeed Module turned on. Try turning it off and see if it makes a difference .

    Furthermore try viewing it in another Browser and check . 

    Be.st

    ThemeNectar Support Team 

  •  2
    IgnyteGroup replied
    March 6, 2018 at 2:20pm

    I have tried both options.

    After clearing the cache, the problem still occurs in both firefox and chrome. 

    Does the issue have anything to do with the BWPM plugin?

    If you resize the window with the cursor by dragging a corner you will see the text being cut off. 

    Best


  •  9,014
    Tahir replied
    March 6, 2018 at 2:24pm

    Hey Again,

    Try using the New Responsive Typography Settings in here : http://prntscr.com/gnf951 .

    Best.

    ThemeNectar Support Team 

  •  2
    IgnyteGroup replied
    March 6, 2018 at 4:13pm

    Sorry Tahir, 

    I tried that as well but the <h3> and <p> tags still trail off when resizing the window. 


  •  3,034
    Andrew replied
    March 6, 2018 at 8:57pm

    Hey there,

    Thanks for reaching in,

    Which version of the theme are you running?

    Regards

  •  2
    IgnyteGroup replied
    March 7, 2018 at 1:03pm

    Hey Andrew,

    I just updated to the current version (v8.5.4) but the resizing problem is still there.


  •  9,014
    Tahir replied
    March 7, 2018 at 1:18pm

    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):

    @media only screen and (max-width: 1300px) and (min-width: 1000px) {
    .row .span_2 h3, .row .span_3 h3, .row .span_4 h3, .row .vc_col-sm-2 h3, .row .vc_col-sm-3 h3, .row .vc_col-sm-4 h3, .row .col h3, body h3 {
        font-size: 18.1px !important;
        line-height: 22.6px !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  2
    IgnyteGroup replied
    March 7, 2018 at 3:12pm

    Tahir, 

    Thank you for solving the issue with the headers. They are fixed now. 

    But the <p> tags still get cut off on http://18.216.178.149/our-capabilities/cloud-transformation/. 

    I tried using this based on your code but I could not get it to work. 

    @media only screen and (max-width: 300px) and (min-width: 300px) {
    .row .span_2 p, .row .span_3 p, .row .span_4 p, .row .vc_col-sm-2 p, .row .vc_col-sm-3 p, .row .vc_col-sm-4 p, .row .col p, body p {
        font-size: 16.1px !important;
        line-height: 22.6px !important;
    }
}


  •  9,014
    Tahir replied
    March 8, 2018 at 11:50am

    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):

    @media only screen and (max-width: 1300px) and (min-width: 1000px) {
    .nectar-fancy-box[data-style="color_box_hover"] .inner p {
        font-size: 13px !important;
        line-height: 18px !important;
    }
}

    Thanks

    ThemeNectar Support Team 

  •  2
    IgnyteGroup replied
    March 8, 2018 at 1:40pm

    Tahir,

    Thanks again for your support on this issue, everything is good to go now.

    Best