css Question posted in
Some basic documentation can be found here.

Css – How can I wrap elements on mobile screen sizes?

I want to have the sponsored text and image wrap to the bottom of the logo on mobile but flex-wrap does not seem to be doing it. I would like the 50×50 image and the ‘sponsored by" text to go underneath the 80×80 image below 1024px (side by side). Thanks

console.clear();
<script src="https://cdn.tailwindcss.com"></script>


<div class="inline-block relative bottom-2 right-1">
  <span class="inline-flex items-center text-blue">
    <img src="https://placehold.co/80x80"/>
   
    <div class="flex justify-center text-black">
      <div class="mt-2 ml-0.5 sm:text-sm text-[10px] flex-wrap lg:flex">sponsored by</div>
      <img class="mt-0.25 pl-0.5 object-scale-down flex-wrap lg:flex" src="https://placehold.co/50x50" />
    </div>
  </span>
</div>
Tags:

2

Answers


  1. 0

    Flex-wrap applies to the children of the element on which it’s applied, so you need to move that class. This would result in the elements wrapping when there’s not enough space. This demo shows that.

    If you want to wrap at a particular breakpoint instead you need to use something like a block-level wrapper for small screens and transition to inline-block for larger screens.

    console.clear();
    .mobile {
  max-width: 150px;
}
    <script src="https://cdn.tailwindcss.com"></script>

<h2 class="mb-2">Full Width</h2>

<div class="inline-block_disabled relative bottom-2 right-1">
  <span class="inline-flex items-center text-blue">
    <img src="https://placehold.co/80x80"/>
   
    <div class="flex flex-wrap justify-center text-black">
      <div class="mt-2 ml-0.5 sm:text-sm text-[10px] lg:flex">sponsored by</div>
      <img class="mt-0.25 pl-0.5 object-scale-down lg:flex" src="https://placehold.co/50x50" />
    </div>
  </span>
</div>

<h2 class="mb-2">Mobile Width</h2>

<div class="inline-block_disabled relative bottom-2 right-1 mobile">
  <span class="inline-flex items-center text-blue flex-wrap ">
    <img src="https://placehold.co/80x80"/>
   
    <div class="flex justify-center text-black">
      <div class="mt-2 ml-0.5 sm:text-sm text-[10px] lg:flex">sponsored by</div>
      <img class="mt-0.25 pl-0.5 object-scale-down lg:flex" src="https://placehold.co/50x50" />
    </div>
  </span>
</div>
    Login or Signup to reply.
  2. 0

    I added the flex-wrap class to the outer span element to enable flex wrapping for smaller screens. Additionally, I modified the structure inside the span to use flex-col for mobile (flex-col sm:flex-row), ensuring that the "sponsored by" text and the 50×50 image are displayed in a column layout on smaller screens and side-by-side on screens larger than 640px.

    <script src="https://cdn.tailwindcss.com"></script>
    
    <div class="inline-block relative bottom-2 right-1">
      <span class="inline-flex items-center text-blue flex-wrap">
        <img src="https://placehold.co/80x80"/>
       
        <div class="flex flex-col sm:flex-row items-center text-black">
          <div class="mt-2 sm:mt-0 sm:text-sm text-[10px]">sponsored 
          by</div>
          <img class="mt-0.25 pl-0.5 object-scale-down" 
          src="https://placehold.co/50x50" />
        </div>
      </span>
    </div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search