Skip to content
Submitted over 3 years ago

Basic tools: visual studio code only

Ignas•70
@ignasc
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

When media query kicks in for desktop size, I have changed text alignment to left like so: text-align: left; But for some reason, this specific property is not applied unless I add !important to it: text-align: left !important; Is there any reason why all other properties in media query override correctly, while text alignment does not?

Community feedback

  • kirmint•55
    @kirmintPosted over 3 years ago

    Hello, you can check using browsers developers tools why this is happening.

    #mainContent > * {
    margin: 1em auto;
    text-align: center;
}

    is above/has priority over:

    @media screen and (min-width: 1000px)
h1, p {
    text-align: left;
}
    0
    Ignas•70
    @ignascPosted over 3 years ago

    @kirmint oh, that makes sense. I checked about media query precedence after your comment and it does seem like they have no priority over the rest of the code. Thanks for pointing this out!

    0

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