Responsiveness not working well

  • Resolved raoulunger

    (@raoulunger)


    2 years, 9 months ago

    Hi, I’m setting up a website for a client with a responsive CSS grid. I cannot give you a link, because the site is behind a ‘coming soon’ page.

    I have a slider sitting in that grid. It’s within a div that takes up a certain area of the grid. The slider is set to boxed, so that it will fill the 100% width of the div. When the page is loaded this works fine. But when the window (viewport) is made less wide, and the grid therefor also becomes less wide, the slider does not resize with it. Only when the page then is refreshed will the slider load in the correct new size. The strange thing is that the reverse is not true: when the window starts less wide, and is then made wider, the slider will adjust fine. So in short: it will go bigger, but it won’t go smaller.

    I love the way the overall plugin words and looks, but this is of course undesirable behavior for a responsive slider, and renders it useless for my purpose. Is there a way to solve this?

    Thanks!

    • This topic was modified 2 years, 9 months ago by raoulunger.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Thread Starter raoulunger

    (@raoulunger)

    2 years, 9 months ago

    Actually, I have now set-up your plugin and a temporary test page on my own portfolio site to show you the problem more clearly. CSS and HTML are both on the same page:

    https://roodlof.nl/?page_id=5113

    I tested this page in Safari, Chrome and Vivaldi (on an iMac) and the problem only occurs in Firefox (both Regular and Developer Edition). I had not noticed that yesterday.

    The test page shows two item
    – two images in on slider in a grid
    – the same image image in the same grid (but not as slider)

    You can observe that, when making the width of the window smaller, the slider does not adjust well. It stays at the same size. Only when the page is refreshed will it load at the correct size. When making the width of the window wider again the problem is not there. The second image (no slider) behaves as expected.

    Can we solve this?

    Cheers!

    • This reply was modified 2 years, 9 months ago by raoulunger.
    • This reply was modified 2 years, 9 months ago by raoulunger.
    • This reply was modified 2 years, 9 months ago by raoulunger.
    • This reply was modified 2 years, 9 months ago by raoulunger.
    • This reply was modified 2 years, 9 months ago by raoulunger.
    • This reply was modified 2 years, 9 months ago by raoulunger.
    Thread Starter raoulunger

    (@raoulunger)

    2 years, 9 months ago

    [edited the test page to show only slider and regular image in one grid]

    • This reply was modified 2 years, 9 months ago by raoulunger.
    Plugin Support Zhanna Khachatryan

    (@zhannak)

    2 years, 9 months ago

    Hi @raoulunger,

    I am very sorry to get back to you late.

    Please add this CSS to every wds_container1_ which wrapper has display: grid and has this issue:

    .wds_slider_cont {
width: unset !important;
}

    This should resolve the issue.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Responsiveness not working well’ is closed to new replies.