Skip to content
Submitted over 4 years ago

HTML CSS only

Steffan Hatlestad•90
@befflus
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

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

  • Juan Daniel Martínez•470
    @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 your tile divs. You could see how the position of the elements inside changes, don't be scared, the default value of the direction of items is row. Just add the flex-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 the align-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, and center, you can learn about Grid system instead.

    Also learn more of Flexbox here

    Hope you could understand me. Happy coding! 😁

    1

Please log in to post a comment

Log in with GitHub

Join 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