Support » Plugin: WordPress Slider Block Gutenslider » Generatepress overflow container

  • Resolved werfewr

    (@werfewr)


    Hey! Thank you for awesome plugin. However on my site is little buggy. It overflows the container of page – I am using generatepress premium.

    Also it doesnt display icons. It is propably not compatible with font awesome plguin :(..

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Plugin Author eedee

    (@eedee)

    for me there is no overflow. do the font awesome icons work on other (sub-)pages?

    I dont know your resolution, but check it again. On mobile it works. On 1920×1080 monitor, there is horizontal slider in browser.

    Here is the screenshot: https://pasteboard.co/IIUf8MP.png

    I am not using it elsewhere. But font awesome normally works. I am using it on product pages for example: https://beta.gastrojet.cz/gastrotechnika/manual-poemia-fokus/.

    Plugin Author eedee

    (@eedee)

    Is this still a Problem?

    Yes it is, can you help?

    Plugin Author eedee

    (@eedee)

    Hey @werfewr,

    1. I tested your site in safari, chrome and fireforx and the overflow is not happening in my case. Can you update your browsers and disable Addons, to see if it is an issue with your setup please. Also send me information about the browser and OS you are using to being able to reproduce the issue.

    2. You are right with font awesome on your site. Seems to be an issue with your theme + Gutenslider. It seems, some script is replacing font-awesome font icons with SVGs. The following Css should fix it:

    .wp-block-eedee-block-gutenslider.arrow-style-1 .slick-prev::before,
    .wp-block-eedee-block-gutenslider.arrow-style-1 .slick-next::before {
        content: unset !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    .wp-block-eedee-block-gutenslider .slick-prev svg,
    .wp-block-eedee-block-gutenslider .slick-next svg {
        width: 50px; /* set to the height + widht you want */
        height: 50px;
        color: #fff; /* set to the color you want */
    }
    • This reply was modified 1 month, 3 weeks ago by eedee.

    Hey! Thanks for the fix of Icons.

    The overflow issue happens in all browsers for me. I am on laptop with 1920x1080px.

    I have deleted cache, used clean installation of firefox developer edition and still getting it. It loads well, but there is still little overflow of container.

    Look at here: https://imgur.com/7RETTld

    • This reply was modified 1 month, 3 weeks ago by werfewr.
    Plugin Author eedee

    (@eedee)

    hmm it seems a windows issue. its not happening on mac. do you have css experience? you can try to add

    overflow: hidden

    to certain elements of the slider and try if it goes away.

    Hi, I have already tried the overflow hidden, on every element inside gutenslider. It does nothing. I think there is a problem with this class which set the size to 100vw

    screenshot: https://imgur.com/T9TMAbc

    Ok, the fix is, to set
    overflow-x:hidden;

    on whole body element. Strange, but working 🙂

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