@davidomarf
Posted
Hi Robert.
This is really the closest I've ever seen someone replicating a layout. Kudos for that dedication and attention to the details.
I didn't know about the existance of diffchecker. I'll give a look to it.
And definetely documenting your process is really useful. It's something not everyone does, but should.
About the website, I think it's better to take what a design "means", than what it literally looks like.
For example, the design probably means that, in wide formats, the page should cover all the screen. Both in height and width. And that is a more powerful meaning that "The image should be Xpx wide and Ypx tall. This text should be Xpx wide and Ypx tall. There should be a space of Xpx between these two eleemtns".
Along those lines:
Try to limit the width of your components and to contain them at the center of your screen.
If you're in Chrome, open the console with Ctrl + Shift + I and then press Ctrl + Shift + M to open the "Device Toolbar". With that, you can set custom resolutions and see how your page would look in a screen of that size.
In your page, if you go to really wide resolutions, the text will appear in only one line. And it starts to lose its expected design.
To prevent that, you can create a main container that will hold everything inside it. Then limits its size, and automatically center it.
My favorite way to do that is with something like this:
<body>
<div class="main-container">
</div>
<body>
body {
display: flex;
}
div.main-container {
margin: auto; // This centers it horizontally
// This limits the width.
// So in ultriwide screens, it'll not grow any bigger than this.
// And therefore, will keep the layout (e.g., the text not overflowing)
max-width: 1280px;
// This is what the width will be on screens smaller than the max-width.
width: 90%;
}
I see you use flexbox, but some of the child elements of flex-elements are not restricted in the size they can take. This is useful to maintain proportions in different sizes.
For example, to avoid the image taking more space than it should, you could limit its width. Just as before. And you can set it to percentages, too. And those percentages will be relative to what their parent width is.
<div class="some-container">
<div class="image-container">
<img src="">
</div>
<div class="other-container">
</div>
</div>
div.image-container,
div.other-container {
// This will make both containers be 50% of the size of some-container.
// It doesn't matter what's the width of some-container.
width: 50%
}
div.image-container img {
// This doesn't mean it'll take all the width,
// but all the width of image-container (which is half the size of "some-container")
width: 100%;
}
And finally, check your "intermadiate" widths.
Try not to restrict your designs to two resolutions. Make it work for in-between widths.
Set at 650px wide, for example, only the image is visible. And it's overflown to the right.
You can use flex-box, max-width, and width for that.
Congrats for your solution. I'll definetely give diffchecker a try. It looks like this solution had a lot of effort behind it. Keep the good work!
@tarasis
Posted
@davidomarf fabulous comment David, thank you for taking the time to write all of the that. Lots of helpful tips & things I need to take onboard & digest.
I did know that the in between states where less than ideal (esp the way the social buttons ended up in completely the wrong place between about 600-1200px wide), but felt I needed to stop and get feedback before I maybe went too far in the wrong direction.
Reg "Set at 650px wide, for example, only the image is visible. And it's overflown to the right.". Ahh this is something I thought was a bug with Chrome. Sometimes, but only sometimes, when I used the 375x800 "device" it would do that too. The mockup would be huge and got right off the side of the screen. Sounds like its more a bug in how I tried to use grid.
I had used the "Device Toolbar" but only really for the resolutions in the style doc (375 & 1440 wide), and using "responsive" to sometimes look at how it looked between the two. I didn't check to see how it looked at larger than 1440x800. My long winded way of saving, "noted, will adjust" :)
Reg "better to take what a design "means", than what it literally looks like" I'll point to my comments to Emmilie & Emin.
I need to go for now, but thanks again. I'll try and finish responding later and will make some changes based on your feedback <3
@davidomarf
Posted
@tarasis It's very nice to see your thoughtful responses to every comment you received. That's important. Even more important than code, I'd say.
Working as a developer is more about people than about code. It's important to communicate and get involved. You're definetely on the right track!
I wish you the best of luck. I hope to see more of your work around here! :D
