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>Related: https://css-tricks.com/manuel-matuzovic-max-trickery/