I am trying to make a desktop version of a mobile app. But not sure how to fill those full width cards to a desktop app.
closed as off-topic by maxathousand, Devin, Midas, Mayo, JohnGB♦ Aug 4 '17 at 0:20
This question appears to be off-topic. The users who voted to close gave this specific reason:
Use the grid system to line the cards and set breakpoints.
Because you're using Semantic UI, you've got the tools right there. Instead of your cards flowing way too wide, add the right breakpoint. On desktop, you often see cards go three across. So in a 12 column grid, break it into 3 instances of 4 columns each.
Find a reasonable desktop breakpoint. I haven't used Semantic, but bootstrap generally has 3 breakpoints.
- Small devices (tablets): 768px and up
- Medium devices (desktops): 992px and up
- Large devices (large desktops) 1200px and up
There's also a 480px and lower, which applies to mobile phones.
I'm not sure what domain you're designing for, but mediaqueri.es has a gallery of responsive design inspiration; you'll see all manner of websites with their responsive breakpoints.