Jani-B• 270
@Jani-B
Posted
Hi,
The solution is very close to the given design. There is few things that might help you:
- If you would wrap the picture and text divs in same "card" container it would help.
- What i did myself -> i made the container flex like you also did. But i also added div class "card" and made that a grid with 2 sides. So that way you can control the "card" more accurately. Now when I change the display size it will brake because the picture container and text container have their own lives.
- Also if you add some @media queries that will take effect for example in 800px width and other one that will take effect in around 400px -> you can change font size, padding etc to make sure the text will not brake your design on very small screen widths.
- Also very important addition. Use the flexbox to justify-content: center and align-content: center to get the items to center the screen. (remember to use height: 100vh for the flex container. -> it will make the height of the container 100% of the screen width so that the item really is centered on the screen).
I hope these comments help you.
Good work with the design :)
1
