Home Forums Plugins Notice Bar Pro Plugin conflicting with another’s CSS

Viewing 12 posts - 1 through 12 (of 12 total)
  • Author
    Posts
  • #117078
    Web Master
    Participant

    I’m currently using a plugin called WooThumbs for WooCommerce by Iconic. I just purchased Notice Bar Pro and everything works pretty well for my needs. However, it conflicts with the above plugin. When you visit one of the product pages on in my store the product gallery is cutoff and not working properly. Both plugins user “Slick Slider” so it appears the CSS if overriding the other. Any suggestions on how to fix this?

    #117117
    wensolutions
    Keymaster

    Hello,

    Can you please provide us your site URL and provide the screenshot marking the issue so that we can provide you with the precise fix.

    Regards.

    #117159
    Web Master
    Participant

    Plugin Activated: https://imgur.com/hCJrm7W
    Plugin Deactivated: https://imgur.com/1ki0rsx

    #117204
    wensolutions
    Keymaster

    Hello,

    Please do not direct post your password to the public forum. For now, we have deleted your reply. Once send the login detail at wensolution[at]gmail.com

    We will inspect the issue with the information you provided.

    Regards.

    #117209
    wensolutions
    Keymaster

    Hello,

    To resolve the issue of the CSS, you can add CSS following the path Admin Panel > Appearance > Customize > Additional CSS

    .iconic-woothumbs-images-wrap .iconic-woothumbs-images .slick-list {
     max-height: unset !important;
    }

    Hope this helps.

    If you have further queries, let us know.

    Thank you.

    #117266
    wensolutions
    Keymaster

    Hello,

    To resolve the issue of the CSS, you can add CSS following the path Admin Panel > Appearance > Customize > Additional CSS

    .iconic-woothumbs-thumbnails-wrap .slick-initialized.slick-slider{
        padding: 0 !important;
    }
    
    .slick-initialized.slick-slider {
        padding: 0;
    }
    
    .iconic-woothumbs-thumbnails-wrap .iconic-woothumbs-thumbnails__slide {
        width: 100% !important;
        padding: 0;
    }
    
    .iconic-woothumbs-thumbnails-wrap .slick-list {
        max-height: 100% !important;
    }

    Hope this helps.

    If you have further queries, let us know.

    Thank you.

    #117248
    Web Master
    Participant

    I applied this and it did fix the partial image showing. But there are two other issues I noticed.

    Below are screenshot examples:

    Looks Like this now: https://imgur.com/MFonZmO
    Should look like this: https://imgur.com/V4Kz5NI

    You should notice to left thumbnails and the primary image displaying seems to be slightly reduced in size.

    #117304
    Web Master
    Participant

    After applying this, the left sidebar thumbnails are back to normal state (on desktop view). I’m still having several conflicts. Listed below:

    1. Primary image being displayed is zoomed out. When the plugin is deactivated the primary image being displayed is larger. That’s how I’d like it to continue to appear. See attached images.

    Deactivated: https://imgur.com/GP15hHL (primary image is 414 x 414)
    Activated: https://imgur.com/8NpFNI6 (primary image is around 100px less in size)

    2. When site is scaled (responsively) the thumbnail gallery does not scale. After applying the last css changes. See attached images.

    Without last CSS applied: https://imgur.com/pFT3Exz
    With last CSS applied: https://imgur.com/mfCTQxp

    3. Mobile responsive menu is off-canvas. When selected it slides in from the right but the notice bar stays on top. How can this stay behind the mobile menu so when a user selects the mobile menu and the menu slides in, that the notice bar does not appear in on top. See attached images.

    Deactivated: https://imgur.com/GgbcCdL
    Activated: https://imgur.com/2nGmaSW

    If you can resolve these 3 issues I should be all set and ready to go.

    #117473
    wensolutions
    Keymaster

    Hello,

    First of all, please remove the CSS we had provided you earlier.

    Please find answers regarding your queries pointwise below:

    Query2: When site is scaled (responsively) the thumbnail gallery does not scale. After applying the last css changes.

    Response: Please add CSS given below to solve the issue.

    .iconic-woothumbs-thumbnails-wrap .slick-initialized.slick-slider{
        padding: 0 !important;
    }
    
    .slick-initialized.slick-slider {
        padding: 0;
    }
    
    .iconic-woothumbs-thumbnails-wrap .iconic-woothumbs-thumbnails__slide {
        padding: 0;
    }
    
    .iconic-woothumbs-thumbnails-wrap .slick-list {
        max-height: 100% !important;
    }

    Query 1. Primary image being displayed is zoomed out. When the plugin is deactivated the primary image being displayed is larger. That’s how I’d like it to continue to appear.

    Response: The issue might have raised due to issue related to cache so please once verify the issue by clearing the cache.

    Query 3. Mobile responsive menu is off-canvas. When selected it slides in from the right but the notice bar stays on top. How can this stay behind the mobile menu so when a user selects the mobile menu and the menu slides in, that the notice bar does not appear in on top.

    Response: To make the notice bar not to appear when the mobile menu is selected, you can add following given CSS by going to Admin Panel > Appearance > Customize > Additional CSS

    .active-mobile .nb-notice-outer-wrap-729 .nb-notice-wrap {
        z-index: 1;
    }

    If you have queries further, let us know.

    Thank you.

    #117490
    Web Master
    Participant

    Hello,

    Query 2 and Query 3 have been resolved. Thank you! I have verified that cache is off, as I’m in development mode on my server so all caching has been disabled. So I don’t believe thats its a caching issue? I provided a short video clip url to show you what I’m seeing. When the plugin is deactivated the zoomed in then zoomed does not happen as it does in the video clip.

    https://www.healthyhemp.com/wp-content/uploads/2020/03/refresh.mov

    #117517
    wensolutions
    Keymaster

    Hello,

    For the image to zoom in, you can add CSS following the path Admin Panel > Appearance > Customize > Additional CSS

    .iconic-woothumbs-images-wrap .slick-slide {
        padding: 0px;
    }

    Hope this helps.

    Regards.

    #118209
    Web Master
    Participant

    This helped but its still being zoomed out/resized from 414px by 414px to 374px by 374px. Not sure why. When deactivated this does not happed. I think I have found the block of code it’s coming from.

    .section-1,
    .section-2,
    .section-3 {
    align-items: center;
    display: flex;
    overflow: hidden
    }

    .slick-initialized.slick-slider {
    padding: 0 20px;
    width: 100%
    }

    .slick-slide {
    display: none;
    float: left;
    text-align: center;
    padding: 10px;
    height: 100%;
    min-height: 1px
    }

    .nb-slide-textarea {
    width: 100%!important
    }

    .slick-prev {
    left: -20px
    }

    [dir=rtl] .slick-prev {
    right: -20px;
    left: auto
    }

    .slick-next {
    right: -20px
    }

    [dir=rtl] .slick-next {
    right: auto;
    left: -20px
    }

    .slick-list {
    max-height: 68px
    }

    .nb-social_icons-wrap {
    width: 100%;
    padding: 10px 0
    }

    .nb-form {
    padding: 15px 0;
    display: flex;
    vertical-align: middle;
    margin: 0 auto
    }

    .nb-shortcodes {
    margin: 0 auto;
    padding: 0 10px
    }

    @media (min-width:1200px) and (max-width:1920px) {}

    @media (min-width:992px) and (max-width:1199px) {}

    @media (min-width:768px) and (max-width:991px) {}

    @media (max-width:767px) {
    .nb-form {
    padding: 15px 0
    }
    .nb-social_icons {
    margin: 10px 0
    }
    .nb-notice-wrap.nb-top-absolute,
    .nb-notice-wrap.nb-bottom,
    .nb-notice-wrap.nb-top-fixed {
    display: block
    }
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-1,
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-2,
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-3,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-1,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-2,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-3,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-1,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-2,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-3 {
    width: 100%;
    height: auto!important
    }
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-1 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-3 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-1 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-3 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-1 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-3 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-toggle-outer729,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-toggle-action729,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap.nb-bottom .nb-close-action729 {
    background-color:
    }
    .nb-notice-outer-wrap-729 .nb-top-fixed .nb-toggle-action729,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-toggle-outer729,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap.nb-top-fixed .nb-close-action729 {
    background-color:
    }
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .nb-close-action729,
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .nb-toggle-action729,
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-toggle-outer729 {
    background-color:
    }
    }

    @media only screen and (max-width:640px) {
    .nb-form {
    padding: 15px 0
    }
    .nb-social_icons {
    margin: 10px 0
    }
    .nb-notice-wrap.nb-top-absolute,
    .nb-notice-wrap.nb-bottom,
    .nb-notice-wrap.nb-top-fixed {
    display: block
    }
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-1,
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-2,
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-3,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-1,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-2,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-3,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-1,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-2,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-3 {
    width: 100%;
    height: auto!important
    }
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-1 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-3 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-1 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-3 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-1 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-3 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-toggle-outer729,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-toggle-action729,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap.nb-bottom .nb-close-action729 {
    background-color:
    }
    .nb-notice-outer-wrap-729 .nb-top-fixed .nb-toggle-action729,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-toggle-outer729,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap.nb-top-fixed .nb-close-action729 {
    background-color:
    }
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .nb-close-action729,
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .nb-toggle-action729,
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-toggle-outer729 {
    background-color:
    }
    }

    @media only screen and (max-width:320px) {
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-1,
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-2,
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-3,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-1,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-2,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-3,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-1,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-2,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-3 {
    width: 100%;
    height: auto!important
    }
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-1 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .section-3 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-1 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap .section-3 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-1 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap .section-3 {
    display: none!important
    }
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-toggle-outer729,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-toggle-action729,
    .nb-notice-outer-wrap-729.nb-bottom-outer .nb-notice-wrap.nb-bottom .nb-close-action729 {
    background-color:
    }
    .nb-notice-outer-wrap-729 .nb-top-fixed .nb-toggle-action729,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-toggle-outer729,
    .nb-notice-outer-wrap-729.nb-top-fixed-outer .nb-notice-wrap.nb-top-fixed .nb-close-action729 {
    background-color:
    }
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .nb-close-action729,
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-notice-wrap .nb-toggle-action729,
    .nb-notice-outer-wrap-729.nb-top-absolute-outer .nb-toggle-outer729 {
    background-color:
    }
    }

Viewing 12 posts - 1 through 12 (of 12 total)
  • You must be logged in to reply to this topic.