Skip to content
Submitted 9 months ago

Centering QR code component with -ms-transform

P
Tomislav Šuto•260
@RetroApe
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?

I am just proud I managed to match the design :)

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

There were some little challenges like working with Git, nothing to write home about.

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

Although the project was simple to do, centering an element vertically and horizontally seems to be more complicated than it should. Using flex is possible (I think), but I decided to use positioning:

.container {
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

I understand the transform property, but I don't understand what is -ms-transform property supposed to be and what does it do. If anyone has an answer or has a link with a good explanation, I am happy to devour it :)

Code

Please log in to post a comment

Log in

Community feedback

  • P
    lai yiu leung•400
    @jasper2virtual

    Although translate and absolute positioning can get the job done, but this is the technique decades ago. In modern css, flex and grid are the better tools when you try to build the structure of layout.

    Positioning and translation is still useful today, depending on the use case. One example is building the dynamic widget on screen.

    Marked as helpful
  • Esteban•670
    @evertzner

    Hi, nice job!

    The -ms- is a vendor prefix, this allows developers to change browser configurations to test upcoming features. Browsers now add experimental features behind user-controlled flags or preferences. Flags can be added for smaller specifications enabling reaching a stable state much more quickly.

    Those prefixes are:

    • -webkit- (Chrome, Safari, newer versions of Opera and Edge, almost all iOS browsers including Firefox for iOS; basically, any WebKit or Chromium-based browser)
    • -moz- (Firefox)
    • -o- (old pre-WebKit versions of Opera)
    • -ms- (Internet Explorer and Microsoft Edge, before Chromium)

    In my opinion, you should try to strengthen your flex and grid skills. It will let you do incredible things!

    Marked as helpful

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