Show DevBest Freelance Designer layout

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
You should know by now that I love coding people's PSDs, well I've recently found another brilliant one by a designer called Ugur Balkaya, the specific PSD can be found at

The design is responsive and should fit nicely to any device (I think? It works on my iPhone and iPad anyway!)

It's desktop-first coded as I didn't have a mobile layout to work off, so I've coded the desktop version first and then scaled it down.

The trickiest part was getting the world map sorted properly. It looked fine on desktop, then as it scaled down, it started to break due to the actual map being a background and having no fixed height, the faces would stick in their positions because they are absolute-positioned so the only way to fix that on mobile was to get rid of the faces after a certain breakpoint. This meant that the map would collapse as the only thing giving it height was the container holding the faces and once that was hidden, it would collapse the map. So instead, I placed an image of the map inside the container and hidden it on desktops, but displayed it on mobile devices whilst hiding the background-image of the map in the main container and the faces. Confusing? I know. I tried so many different possibilities to get it right and nothing worked.

Anyway, if you fancy viewing the layout, you can do so at
 

Weasel

👄 I'd intercept me
Nov 25, 2011
4,128
2,456
Saw you share this in the shoutbox, looks really great. One small bug, there's a horizontal scrollbar. Might want to fix that.
 

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
Saw you share this in the shoutbox, looks really great. One small bug, there's a horizontal scrollbar. Might want to fix that.
What device are you viewing on? I'm on my iMac and there's no horizontal scrollbar for myself, then I just looked on my iPhone and there isn't one there either.

But thanks! :D
 

Weasel

👄 I'd intercept me
Nov 25, 2011
4,128
2,456
What device are you viewing on? I'm on my iMac and there's no horizontal scrollbar for myself, then I just looked on my iPhone and there isn't one there either.

But thanks! :D
Windows 10, Chrome. 1920x1080px on a 21.5 inch screen. Seems to be caused by the "learn" section/container.
 

Markshall

Русский Стандарт
Contributor
Dec 18, 2010
2,637
2,389
Windows 10, Chrome. 1920x1080px on a 21.5 inch screen. Seems to be caused by the "learn" section/container.
Hmm, I'm on macOS in Chrome also on a 21.5" screen. No idea what my resolution is but it appears fine to me.. hmmm
 

Users who are viewing this thread

Top