Fixing Fiverr’s Layout Problem With One Line of CSS

Originally published

When watching videos in the photo/video scene on YouTube, Fiverr has come to my attention increasingly over the past few months. The online marketplace sponsored prominent YouTubers with credits (as well as the production costs of the video itself), which they can commit on Fiverr. The scheme: YouTubers purchase digital services (“gig’s”) of various providers in different price categories and then evaluate the quality of the work they got back.

For example buying multiple gig’s in ascending price categories with the same task assigned, to edit a finished product video from the raw video footage:

It has been years since I last visited Fiverr.com. Naturally after stumbling upon many sponsored segments I got interested in how the website looks and feels at the moment. So I went into the interweb. I won’t to get into details of Fiverr’s surounding controverse, but rather focus on one single frontend-related layout section.

The front page shows a polished layout as well as thumbnails of the categories in high gloss look. Similarly generic and easy to understand as e.g. Spotify implements it. “Which gig do I might need?” I asked myself. Many stylistic elements within the thumbnails didn’t appeal to me. So I typed “illustration” into the search bar and looked for a style suiting my visual taste.

The gig “I will daw a great illustration” sounded wonderful and looked pleasing as well:

Gig page with demo pictures and prices
The overview page of the “gig” on a desktop device. Original source

But wait… Isn’t there something off with the slider thumbnails?

Let me zoom in and maximise the opacity on inactive images to take it easy on your eyes as well as for a clearer depiction of the problem:

Well, that doesn’t look pretty, does it? Most of the images are stretched way out. The same problem occurred at other gig pages I visited, too. Sometimes the problem was even more obvious in the thumbnails there. A crack in the otherwise polished layout.

Let’s try to correct the aspect ratios!

First Attempt: Object-Fit Property to the Rescue

My initial idea was to set object-fit: contain; on the image element to maintain its aspect ratio while fitting within the element’s content box.

You can test this yourself by opening the context menu on one of the thumbnails and clicking “Examine element”. Inside the elements panel, you will land on the anchor that envelops the image element. Alternatively, you can open the elements panel (inspector) in Chrome with Command+Option+C or Firefox with Control+Shift+C and select the thumbnail from there.

The following code is the extracted CSS of both the anchor and its child image:

.gig-page .gig-gallery-component .gallery-thumbnails .thumbs-container .thumbnail {
  width: 100px;
  height: 100%;
  margin-right: 5px;
}

.gig-page .gig-gallery-component .gallery-thumbnails .thumbs-container .thumbnail img {
  height: 100%;
  width: inherit;
}

Adding object-fit: contain; to the img element fixes the aspect ratio:

But now the gap between each item looks unbalanced.

Simpler Fix: Remove One Line of CSS

Did you spot the width: 100px; on the .thumbnail class? I can’t determine why the anchor is fixed in width. Let’s first revert our additional added style object-fit: contain; and secondly remove the line width: 100px;.

Voilà!

Now we’ve got everything we wanted:

  • correct proportions
  • even spacing between images

The thumbnail row looks so much better. With just deleting one CSS property. I love these little CSS tricks, which seem so simple but are able to impact the overall user experience so much.

Closing Thoughts

In my opinion it would be interesting to experience how a fancy chart embraced by corporate jargon could illustrate the problem — how a more appealing Fiverr layout may result in higher convertion rates, thus why this layout fix is of utter importance.

I can imagine web designers of Fiverr are aware of this problem, but for whatever reason can’t deploy a fix. Since this is just speculation, I’ve sent an email outlining the problem and a solution to Fiverr in addition to this article being published. I’ll keep you posted if any response comes my way! (Which presupposes my email is forwarded to the proper department.)

At the end of the day I didn‘t order the gig. I honestly had no idea what for, even though the style appeals to me.

More Information on Object-Fit

Interested in what object-fit can do? Head over to the article here on CSS-Tricks for a deep dive into the property:

The object-fit property in the CSS-Tricks Almanac


No comment sections for now.

Was this article worth your time? Tell me what you think by dropping me a line. If you spot a typo, Iā€™d appreciate if you let me know. Thank you!

āœŒ