Skip to content
Submitted 8 months ago

Differing Classes

Kryalixe•10
@Kryalixe
A solution to the QR code component challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

What are you most proud of, and what would you do differently next time?

This is my very first project and it definitely not nearly as efficient or clean as it could be, but I am happy I completed my first project since I have been doing nothing but learning theory so far.

What challenges did you encounter, and how did you overcome them?

I don't know how to use flexbox or better ways to align boxes and text, so I inefficiently brute forced margins.

What specific areas of your project would you like help with?

I need help with learning how to better align text and boxes, and not just brute force margins until they look right.

Code

Please log in to post a comment

Log in

Community feedback

  • P
    Huy Phan•3,430
    @huyphan2210

    Hi, @Kryalixe

    When it comes to aligning elements, here are some approaches you can explore:

    1. Flexbox

    Flexbox is a CSS layout module designed for one-dimensional layouts. It makes it easy to align items vertically and horizontally within a container. You can use properties like justify-content (for horizontal alignment) and align-items (for vertical alignment).

    1. Grid

    CSS Grid is a powerful tool for two-dimensional layouts, allowing you to align elements both vertically and horizontally in a grid structure. With properties like grid-template-rows, grid-template-columns, and place-items, it provides precise control over alignment.

    1. text-align

    This property is commonly used for aligning inline content like text and images within a block-level element. For example, text-align: center; centers text horizontally within its container.

    1. position Using positioning (absolute, relative, fixed, or sticky), you can place elements exactly where you want them. For example, with position: absolute; and top, left, right, or bottom values, you can align an element to specific points within a container.

    Let me know what you think!

    Marked as helpful
  • adam arrafi•80
    @carrotass8

    The card is too big and the font isn't the same as told to. but overall is good.

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