I am building a simple app with two screens that show a list of quotes (inside cards), an image and an about screen. On mobile it looks fine (using a tab approach), but for bigger viewports like desktop and tablet, it doesn't look as good – there is a lot of empty space around the shorter quotes.

One approach I've tried is dividing the screen and always showing the image (but on tablet it might get congested). Is there any better way to organize/design this without having to customize individual card sizes based on length?

In Tab(note the gaps) and in desktop it will definitely get worse: enter image description here

  • 1
    Hi, welcome to UX StackExchange. This question would really benefit from screenshots of your work in progress, are you able to share that?
    – Izquierdo
    May 21, 2021 at 15:28

1 Answer 1


Thanks for providing the screen shot for context. I think one of the challenges of using a bright or heavy color in the background is that the purple card becomes the perceived object, rather than the quote. Perhaps on desktop and tablet, you could use a light background, and columns; that would minimize attention to the empty spaces. (Using a masonry layout with uneven card heights is OK in this situation, which could further tighten up shorter content.)

BrainyQuote screenshot

  • I was going after Wall Tile(of different size) but it might not look formal.
    – D J
    May 26, 2021 at 14:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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