CSS Challenge: Can I do this without a breakpoint?

[bernhard]

I'm working on RockCommerce cart functionality and I'm using this markup at the moment (UIkit + TailwindCSS combo):

<div class="uk-flex flex-col [@media(min-width:500px)]:flex-row uk-flex-between gap-1">

So for screens <500px it's flex-col and above it's flex-row with uk-flex-between to make the buttons left and right aligned.

I don't really like the custom breakpoint though. This website is single-language, but what if it was translatable? The breakpoint of 500px would probably cause issues. So I'd like to know if anybody has some css magic to make it work the way I want in all situations? ? 

Thx!

[bernhard]

Follow-up question! In the background you see the "add to cart" button. It is done like this at the moment:

<a
   href
   class='@container uk-button uk-button-primary uk-width-1-1 !bg-maletschek'
   @click.prevent='addToCart'
>
  <span class='hidden @[180px]:inline-block'>In den</span> Warenkorb
</a>

I'm using container queries here with a setting of 180px, which is again a hardcoded value. Is there any way to show "In den Warenkorb" if there is enough space for the button and show "Warenkorb" if not?

[Stefanowitsch]

6 hours ago, bernhard said:

I'm working on RockCommerce cart functionality and I'm using this markup at the moment (UIkit + TailwindCSS combo):

<div class="uk-flex flex-col [@media(min-width:500px)]:flex-row uk-flex-between gap-1">

So for screens <500px it's flex-col and above it's flex-row with uk-flex-between to make the buttons left and right aligned.

I don't really like the custom breakpoint though. This website is single-language, but what if it was translatable? The breakpoint of 500px would probably cause issues. So I'd like to know if anybody has some css magic to make it work the way I want in all situations? ? 

Thx!

@bernhard So you need to know if the buttons still have enough space or are "touching each other"?

If you are able to translate/change the text that is shown inside the buttons you never can be quite sure how much space each button will take up in the end! The only thing that comes to my mind is to observe both buttons with JavaScript using the getBoundingClientRect() method.

In that case you switch the wrapper CSS class from flex row to flex column.

 Another approach to make it "CSS ONLY": Make use of the flex-basis property in combination with the flex grow property:

<div class="uk-container">
  <div class="uk-flex uk-flex-between uk-flex-wrap gap-x-4">
    <span class="uk-button uk-button-primary basis-[content] grow">Button with long Text</span>
    <span class="uk-button uk-button-secondary basis-[content] grow">Button with very very very long Text</span>
  </div>
</div>

The only downside: The buttons will expand so you need to make use of a gap.

[psy]

Here is a CSS-only solution to this exact problem from Kevin Powell:

 

[bernhard]

12 hours ago, psy said:

Here is a CSS-only solution to this exact problem from Kevin Powell:

Thx! I knew this must be possible. I think I even saw this problem recently, but forgot ? 

  .modal-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 5px 1rem;
    > button {
      flex: 1;
      min-width: fit-content;
    }
  }

23 hours ago, bernhard said:

Follow-up question! In the background you see the "add to cart" button. It is done like this at the moment:

<a
   href
   class='@container uk-button uk-button-primary uk-width-1-1 !bg-maletschek'
   @click.prevent='addToCart'
>
  <span class='hidden @[180px]:inline-block'>In den</span> Warenkorb
</a>

Solved that one as well!

Im using an absolutely positioned (left-0 bottom-0 right-0) wrapper inside the button. There I use flex + flex-wrap so that elements stack on top of each other if there is not enough space. And then I use overflow-hidden on the button to hide overflowing words ?