Making flex box responsive


Topic: Making flex box responsive

Curtly asked 5 years ago

Expected behavior I have multiple sector cards thanks to django for loop template, I would like to see four cards per row on lg devices with a width of 25% per card and 1 card with a width of 100% on sm devices.

Actual behavior On small devices I'm getting one card per row but the width is still 25% making the card too narrow to view and when I shrink my browser to the smallest width in getting 4 cards per row and not 1. I did not see a class for extra small devices.

Question How can I get the width to be 100% on small and extra small devices and 25% on large and extra large devices?

Resources (screenshots, code snippets etc.)

 <div class="d-flex flex-wrap flex-lg-row flex-sm-column features-big my-4 text-
    center">

                    {% for sector in sectors  %}
                    <div class="w-25 mb-4 p-3 wow fadeIn sector" data-wow-delay="0.4s">
                        <div class="card hoverable">
                            <i class="fas fa-satellite blue-text mt-3 fa-3x my-4"></i>
                            <h5 class="font-weight-bold mb-4">{{ sector }}</h5>
                            <p class=" grey-text font-small mx-3">
                                Our livestock experts visit farmers accross the region
                                providing training on best practices for livestock production.
                            </p fa-3x mb-4>
                        </div>
                    </div>

                    {% endfor %}

                </div>

lemons answered 5 years ago

I edited your code as snippet and added some html comments for explanations: https://mdbootstrap.com/snippets/jquery/lhock/1630356

  1. you should remove flex-wrap
  2. define layout for smallest view -> flex-column
  3. first breakpoint to change view is lg -> flex-lg-row
  4. remove w-25 as columns in flex-row are evenly by default
  5. add align-items-center and text-center to card for centering content
  6. remove the classes appended to the closing p tag

Curtly commented 5 years ago

Thank you, now my code is working as expected. Thanks for the 6 steps as well, It helped me see how you logically solved this problem.


Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue
  • User: Free
  • Premium support: No
  • Technology: MDB jQuery
  • MDB Version: 4.8.8
  • Device: laptop
  • Browser: crome
  • OS: window
  • Provided sample code: No
  • Provided link: No