@elioflo
Posted
Hi, I think your solution looks great! My suggestion would be to focus on approaching the design rather than making it identical. I remember when I started out, I found it very difficult to make my designs look exactly the same as the reference. Instead, it's better to concentrate on improving your HTML and CSS skills, so that you can better understand how to implement your design. At the end of the day, it's mainly about getting the sizes and proportions right. So, don't get too caught up on making the design perfect.
You can use dev tools to help you approach the design, and if your project looks similar to the design, that's good enough. What I like to do is measure the sizes and proportions and try to replicate them as closely as possible.
I hope this advice is helpful to you!
Elio Flores
Marked as helpful
@remmji
Posted
@elioflo Thanks for kind response. Im just trying 'pixel perfect' approach and those diffrences drives me crazy. Im just trying to figure out how to setup best reference design so i can copy it 1:1 if i want to. Looks like i did mistake on dev tools view and to delete black sides on image i enlarged the picture..so yeah proportions are fine but size is bit bigger.But again why ss looks like this...Have absolutely no idea.
@elioflo
Posted
@remmji Regarding "pixel perfect," you may be interested in checking out my solution. While there may be some differences between the design and the end result, they still appear very similar.
As for the issue of elements being slightly bigger in size, it's possible that setting the height of an element using a percentage value could cause it to grow vertically if the viewport height increases. To avoid this, it's generally recommended to use "height: auto" as the default value, which allows the height of an element to adjust dynamically based on the height of its child elements. However, there may be instances where setting a fixed height is necessary for layout purposes.
Lastly, it's important to understand how flexbox affects the height of your elements. This property can pack elements closely together and cause changes to their height. To see how this works, you can test it out by adding the following CSS code:
.container {
/* additional styles */
/* example height adjustment */
min-height: 100vh;
}
By adding this code and adjusting the height value, you can observe how flexbox changes the height of the container and its child elements.
If you're looking for fast or instant feedback, I recommend utilizing the FrontendMentor Slack community. Sometimes, explaining things through text can be complex, so it may be more helpful to have real-time conversations with other members who can assist you.
I hope this comment has been helpful in improving your solution!
Elio Flores
