Design comparison
SolutionDesign
Solution retrospective
Had issues with displaying the images. The solution was to add code to the HTML with align=right attribute in <img> tag. Also had to add <br> tags to get the tile bigger so the image would fit inside the tile. I think this should be possible to get done with CSS. Any advice how to get this done in CSS?
Community feedback
- @juandadevPosted over 4 years ago
Hello Steffan!
Your design looks great! To avoid the
align="right"
in the tag need to do this:- Work with Flexbox, it's very useful if you know how it works. Add the
display: flex
property to yourtile
divs. You could see how the position of the elements inside changes, don't be scared, the default value of the direction of items isrow
. Just add theflex-direction: column
property. - Flexbox properties only affect the child elements of a container, but you can also modify the children.
- With the
.tiles img
selector just add thealign-self: flex-end
property to move only the<img>
tags inside of the .tiles containers to the right. flex-end value is because this works in the X-axis so the order is left to right = flex-start to flex-end. - The other fact about adding more divs like the
side-left
,side-right
, andcenter
, you can learn about Grid system instead.
Also learn more of Flexbox here
Hope you could understand me. Happy coding! 😁
1 - Work with Flexbox, it's very useful if you know how it works. Add the
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord