We love new ideas!

Please take part in sharing your ideas with us. If you think there is a new feature we should be adding or an enhancement which needs making let us know! You can also vote for and comment on other ideas.

Fully Responsive Carousel Widgets

Problem

The current carousel widgets are not responsive to the size of web pages. I've tried all three carousel widgets but am finding that they tend to break out of the side of the website at anything other than a large desktop screen size. The fixed width is too large and the widgets drop to the mobile size when the containing website is still at a fairly large desktop size. This makes them unsuitable to just drop into an existing website in their current form which is unfortunate because that's the point of them.

Suggested Solution

With every website now being fully responsive to all screen sizes, I would suggest that the widgets themselves should be fully responsive as well and only drop to the mobile version at an appropriate mobile size.

The way the reviews carousel could be made responsive for desktop and tablet sizes could be something similar to the way slick.js works. Not only are the individual slide containers responsive, the carousel shows a different number of slides depending on what screen size it is being viewed at.

From a developer point of view, the carousel responsive breakpoints are configurable in the code. It would be good if within the Feefo hub, the user could choose to have predefined breakpoints or set their own custom ones based on their own site design.

  • Alan Charlesworth
  • Jul 23 2019
  • Attach files
  • Tommy Hodgins commented
    24 Jul 13:18

    Widgets like these should be basing their responsive breakpoints on their own rendered width on the page, rather than based on the size of the browser's viewport. That way you would be able to drop these into any layout, on any website, at any browser size, and you'd know they would show up their best for the space they've been given. Look into "element queries" or "container queries" - the logic for doing these kind of responsive breakpoints is simple to do with the help of JavaScript to measure the size of the rendered element.