[SOLVED] In CSS, is there a way to set margin-inline to auto on desktop but 1rem on mobile, without using a media query?

In CSS, is there a way to set margin-inline to auto on desktop but 1rem on mobile, without using a media query?

I am making a responsive layout. I've developed it mobile first, and the main container has a margin-inline: 1rem;. When the viewport grows to desktop size, I want to limit the width of the container to 500px and I want it to remained centered.

Here's a visual representation for mobile and desktop, respectively:

.mobile {
  color: white;
  background-color: blue;
  margin-inline: 1rem; /* for centering and margin-inline 1rem on mobile */
}

.desktop {
  color: white;
  background-color: blue;
  margin-inline: auto; /* for centering on desktop */
  max-width: 500px; /* for <= 500px on desktop */
}

<div class="mobile">Desired on mobile</div>
<br>
<br>
<div class="desktop">Desired on desktop</div>

Achieving this is straightforward with a media query:

.responsive {
  color: white;
  background-color: blue;
  margin-inline: 1rem; /* for centering and margin-inline 1rem on mobile */
}

@media screen and (min-width: 500px) {
  .responsive {
    margin-inline: auto; /* for centering on desktop */
    max-width: 500px; /* for <= 500px on desktop */
  }
}

<div class="responsive">Desired on mobile/desktop</div>

But I'm wondering if there's a way to achieve this without using a media query? I don't want to modify any parent or child elements to do so.

I tried to get clever by using max-width: 500px; margin-inline: max(1rem, auto);; I thought that might work because the margin computes to 0 when set to auto when the viewport is < 500px... but apparently you can't pass auto into max()? My inspector told me it's an invalid value? So that ruled out that idea.

Is this a situation that requires a media query or modifying the parent/child elements?

If you're wondering why I don't just use a media query, it's simply because I want to learn if it's possible. I think it could also make the CSS more readable.

To provide even more context, I'm using a framework that puts limitations on how I can write my HTML. The structure looks similar to this:

<header>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
</header>
<div>
  <div>
    <div>
      <div>
        <div>
          <div class="part-of-layout">part-of-layout</div>
        </div>
        <div>
          <div class="part-of-layout">part-of-layout</div>
        </div>
      </div>
    </div>
  </div>
</div>
<footer>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
  <div>
    <div class="part-of-layout">part-of-layout</div>
  </div>
</footer>

I need all of these .part-of-layout to abide by the responsive layout design I've described above, but I can't rearrange them to be siblings of a single parent.

FWIW, I am using SASS. Perhaps it provides a way of pulling this off?

Solution

Yes

.responsive {
  color: white;
  background-color: blue;
  /* either 1rem or half the difference between the container width and the max-width */
  margin-inline: max(1rem,(100% - 500px)/2);
}

<div class="responsive">Desired on mobile/desktop</div>

I am explaining it here: https://css-tip.com/center-max-width/