Multi-Item Carousel - you are hiding 2/3rd of the items on s

  1. MDB Home Page
  2. Support Main Page
  3. General Bootstrap questions
Topic: Multi-Item Carousel - you are hiding 2/3rd of the items on small screens... !

IMJE pro asked 4 years ago

Hi, what is the point of having carousel items like your code: div class="col-md-4 hidden-sm-down" when this results in only two-rhirds of all items being displayed on small screens? I want to list three partner links at a time, and one at a time on small screens, not hide most of them - surely most other users want the same behaviour, so it would be nice if you bothered to show a "working" solution without us having to code around these shortcomings. Thanks for considering this improvement and hopefully update the example with a better one.

jbankster.web pro answered 4 years ago

Hi IMJE, I completely understand the frustration here. I remember running into the same problem a while back when testing with templates on small devices and put the issue to the side. We are going to need to revisit this again very soon for a customer, but I can't remember which template we were testing with. Can you link to the demo template on MDB's site that you're referring to? In general, using stock templates to build off of, versus hand coding, we've noticed (in particular) the rendering of text and images on "small devices", specifically, viewports between 360px and 390px, seemed to be an after thought. Although the work put into the stock templates is beautiful and saves us time in many areas (which is why we purchased MDB)... it seems as though they were built to look the best on viewports of 768px and higher. IMO, templates should always be built starting with the smallest screen size supported and then move up, viewport size by viewport size. Just my 2 pennies. Thanks, Josh

Marta Szymanska staff pro premium answered 4 years ago

Hello IMJE and Josh, thank you for your comments and advices. This issue with carousel is on our 'to do' list and we will fix this very soon. And about small devices, like phones, we also try to create more and more 'mobile-first' templates and components. We appreciate your advices and we'll take them into consideration. Best, Marta

richp pro commented 3 years ago

This is problematic for me as well. Any update on the fix?

Marta Szymanska staff pro premium answered 3 years ago

Hi richp, Just remove this part from the code: clearfix d-none d-md-block. Best, Marta

karolla86 commented 2 years ago

Hi, when i remove "clearfix d-none d-md-block" it doesnt worked for me.
Write
Create snippet
Please insert min. 20 characters.
Status

Answered

Specification of the issue
  • User: Pro
  • Premium support: No
  • Technology: General Bootstrap questions
  • MDB Version: -
  • Device: -
  • Browser: -
  • OS: -
  • Provided sample code: No
  • Provided link: No
Tags
carousels multi-item-carousel small-screens
Related topics
1
sidenav close on click link on small screen
0
Multi-item carousel Not Responsive
0
how to set Multi-item carousel with rest api ? move 1 by 1 card
0
Multi-item carousel card deck images
0
Multi-item Carousel 4 or more items
About author
IMJE
Pro User
10Support score
3Questions 1Answers
0Snippets likes 0Snippets

We use cookies to offer you a better browsing experience, analyze site traffic, personalize content, and serve targeted advertisements. Read about how we use cookies and how you can control them by clicking "Cookie Settings." If you continue to use this site, you consent to our use of cookies.