@tenderkale
Posted
Try giving html,body a height of 100%.
Then you could give flex-container a parent which will have
display:flex;justify-content:center;align-items:center;height:100%;
This way, you will position the flex-container on the center of the whole page with no use of margins, or having to guess the size of them. By doing this, you will allow your content to take a full width of the screen at all times.
Since, in this case, your flex-container has a width of ~80%, there is no need to add the width to children elements. They will take up the space that they need. If you give the flex-container a fixed height(~450px, but only for desktop), and the children 100%, you will not have to deal with adjusting the heights of children individually.
With this, on desktop flex-container children will always be the same size, and you won't have to worry of elements popping out of the container or being different size.
On mobile the flex-container will have a width of 100% to take up the whole screen, and the children should follow.
In regards to borders, keep in mind that you can add border-radius for each corner individually. For example: border-top-left & border-bottom-left to left box, and same for the right side.
In regards to content on the left side. You can, again, position it fully with padding, or, since it is a flexbox challenge, add a display:flex to first box, position it vertically and add padding on left and right side.
Take a look at Flexbox Froggy, its a nice game to help you get a better grasp of css flexbox. Also check out PerfectPixel Chrome extension, this will allow you to put a jpg design as an overlay, and create pixel perfect designs Also, if there's anything not clear in what I wrote, please don't hesitate to ask since I am fresh in leaving feedback.
@vtrev05
Posted
@tenderkale Hello Tenderkale, Thank you very much for your answer! It's true that I had troubles centering the content. The advice to assign a certain height to the parent container has been very good, I have already implemented it in the code. In regards to borders, I already knew that a border-radius could be assigned to each corner, but it seemed better to me visually to leave it that way. I will apply the advices given in future projects, thank you very much again.
