1

I'm using Flowbite components. I'm having issues with flex-wrap. as you can see in the screenshots when I check its responsiveness on iPhone 12 model level, it looks ok. But when I have a full screen in the browser, rendered cards do not align horizontally and instead go below. I also attached the chrome dev tool to show where I have applied the flex-wrap. Can you help me to find the issues, please?

stuck for two days already on this one

fullwidthmobile view dev tool

Rashad Bayram
  • 59
  • 6

1 Answers1

1

Try this code: Tailwind-play

Everything is just working fine. According to the url in the comment

The cards are aligned to the right of the left navigation bar

Ouputs in different screens.

enter image description here

enter image description here

krishnaacharyaa
  • 14,953
  • 4
  • 49
  • 88
  • This is strange since on my laptop the cards are shifting to the bottom (you can see the desktop image in my initial post). i cleared browser (chrome) cache, but it did not help. – Rashad Bayram Jan 17 '23 at 02:36
  • It can't happen that way, try to open the said link in my post and open the chromes responsivness tab and try tweaking the screen size. It should work just fine! – krishnaacharyaa Jan 17 '23 at 02:40
  • Yes, it works fine as you say. But on my laptop on local host it does not. – Rashad Bayram Jan 17 '23 at 02:58
  • but also the problem is that on mobile view the cards need to shift under the checkboxes. But they do not shift. What do you the problem is ? – Rashad Bayram Jan 17 '23 at 03:00
  • I suggest you use `flex` instead of `flex-wrap` and make it responsive accross different devices, You are nesting `flex-wrap` inside `flex-wrap` this is causing the problem – krishnaacharyaa Jan 17 '23 at 03:02
  • i use flex-wrap on children (each card) and on two components "checkboxes and component where all cards" are rendered. if I take away flex-wrap the cards stop being responsive. Unless you know exactly how to do it. – Rashad Bayram Jan 17 '23 at 03:07
  • I can show you how to make it responsive using `flex` if you need the same ! I would be happy to help, You just have to let me know, for what screens meaning for small / large or small/medium/large or any , and how would you want the elements to be aligned in the respective screen. If you clear mention the layout you are looking for in every screen, I could help you out making it responsive – krishnaacharyaa Jan 17 '23 at 03:15
  • - On small screens, I need check boxes to come first, then cards - On medium and big screens, checkboxes remain on the left side, but user cards decrease in the number of columns. Big will have 3 columns, medium 2. I hope it makes sense. Thank you so much in advance – Rashad Bayram Jan 17 '23 at 03:24
  • This works ! I'll get back to you with the requird code after some while , got some work to catch up to! – krishnaacharyaa Jan 17 '23 at 03:48
  • It's presently only read, can i have write permission ? Or let me do it in playground, you'll get idea, then you can implement in your code. – krishnaacharyaa Jan 17 '23 at 04:27
  • See the link in my edited post and tell me if you need any further changes, I have designed it based on your demand. [Tailwind-play](https://play.tailwindcss.com/VtmnVRYFjz) – krishnaacharyaa Jan 17 '23 at 05:03
  • Sorry, it was late I went to bed. Thank you very much. If I want on the small screen size the number of columns to decrease/instead of three let's say to see all cards in one column so they are not so small. Shall use flex-wrap ? – Rashad Bayram Jan 17 '23 at 14:56
  • 1
    No avoid flex-wrap all together. Use grid-cols-1 , try this https://play.tailwindcss.com/5CnmnFI5jY – krishnaacharyaa Jan 17 '23 at 14:59
  • One last question. Since i use react it means i will have to render two time columns like you show it in your example right ? – Rashad Bayram Jan 17 '23 at 15:11
  • 1
    I am not pretty sure about it , actually I have tried my best to not render twice, as it was unavoidable because the first time it is responsive to multiple screens, so it couldn't have been used again, so i had to render it twice, yes for this example you would have to do it twice. If the post helped you reach your goal / given idea about reaching your goal, please consider upvoting and accepted the post . Thank you . Hope I helped you ! – krishnaacharyaa Jan 17 '23 at 15:17
  • Thank you. You did, indeed! all the best – Rashad Bayram Jan 17 '23 at 15:46