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.

enter image description here

Web Page

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:

  • "Questions about Implementation are off-topic because this site is for User Experience design questions, not questions around how to implement these designs. Therefore, questions around the use of programs like Photoshop or languages such as CSS or JavaScript are off topic." – Devin, Mayo, JohnGB
If this question can be reworded to fit the rules in the help center, please edit the question.

  • Are we working on the assumption that if there was more real estate to play with, you don't want to put more information on screen? – DarrylGodden Aug 1 '17 at 12:55
  • Can you share a mockup? We have nothing to see from your post. – Mike M Aug 1 '17 at 12:56
  • @MikeM Added it. – Talha Talip Açıkgöz Aug 1 '17 at 12:59
  • These look more like tabs than cards. It looks fairly normal for tabs. It looks like normal behavior for a desktop app. – Mike M Aug 1 '17 at 13:00
  • @MikeM I'm asking for how to put the matches inside tabs in mobile app. Tabs are not the problem, but the cards are. – Talha Talip Açıkgöz Aug 1 '17 at 13:01

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.


download bmml source – Wireframes created with Balsamiq Mockups

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.

  • Do you think cards need dividers between? – Talha Talip Açıkgöz Aug 1 '17 at 14:43
  • I haven't seen dividers used. Normally you just have a subtle border containing each card. Dividers will just add more visual noise. – Mike M Aug 1 '17 at 14:44
  • Also, there is an L or CS: GO icon every card. Where should I place it? – Talha Talip Açıkgöz Aug 1 '17 at 15:01
  • 1
    In the example above posted by @MikeM the Logo should be placed in the bottom on the left side of each card-title. – Pectoralis Major Aug 1 '17 at 15:13

Not the answer you're looking for? Browse other questions tagged or ask your own question.