How do i fix the responsive height of an image in tailwind css?

Question

      <!-- this is the container with the services paragraph and the image of an egg -->

      <!-- this is the first container with the paragraph -->
      <div class="flex flex-1 flex-col items-center lg:items-start p-4">
        <div class="px-28 pt-16">
          <h2 class="text-3xl md:text-4xl lg:text-5xl mb-6 font-bold">
            Transform your brand
          </h2>
          <p class="mb-6">
            We are a full-service creative agency specializing in helping brands
            grow fast. Engage your clients through compeling visuals that do the
            most marketing for you
          </p>
          <span><a href="#">Learn more</a></span>
        </div>
      </div>
      <!-- this is the first image displaying an egg -->
      <div
        style="background-image: url(./images/desktop/image-transform.jpg)"
        class="
          bg-cover bg-center
          text-center
          w-100
          h-100
          flex
          container
          flex-1
          text-center
        "
      ></div>
    </section>
    <!-- this is the container with the services paragraph and the image of a glass -->
    <section class="flex flex-col lg:flex-row">
      <!-- this is the first image displaying some glasses -->
      <div
        style="background-image: url(./images/desktop/image-stand-out.jpg)"
        class="
          bg-cover bg-center
          text-center
          w-100
          h-100
          flex
          container
          flex-1
          text-center
        "
      ></div>
     

So the glasses and egg pictures look fine in desktop but the thing is as soon as i test the responsivenes they dissapear, i tried changing the width and the height but it doesn't seem to make any change. Any idea on why this seems to happen?

Answer 1

There's a few classes you could remove/change to make it display on mobile.

• The background image div classes in your second section , change flex-1 to either flex-auto , or flex-initial . Both react differently so try them both.
• Alternatively, on the parent section, change the classes from flex flex-col lg:flex-row to flex lg:flex-row .

It really depends on the surrounding items in your code and what your needs are as to which option fits your specific needs. As you'll notice they both affect that image differently so pick your poison. You can also try both at the same time to get the desired result.

Remove flex-col from parent:

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <section> <div class="flex flex-1 flex-col items-center lg:items-start p-4"> <div class="px-28 pt-16"> <h2 class="text-3xl md:text-4xl lg:text-5xl mb-6 font-bold">Transform your brand</h2> <p class="mb-6">We are a full-service creative agency specializing in helping brands grow fast. Engage your clients through compeling visuals that do the most marketing for you</p> <span><a href="#">Learn more</a></span> </div> </div> <div style="background-image: url(https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=600&height=400)" class="bg-cover bg-center text-center w-40 h-40 flex container flex-1 text-center"></div> </section> <section class="flex lg:flex-row"> <div style="background-image: url(https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=600&height=400)" class=" bg-cover bg-center text-center w-40 h-40 flex container flex-1 text-center"></div> </section>

Update flex-1 to flex-auto :

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <section> <div class="flex flex-1 flex-col items-center lg:items-start p-4"> <div class="px-28 pt-16"> <h2 class="text-3xl md:text-4xl lg:text-5xl mb-6 font-bold">Transform your brand</h2> <p class="mb-6">We are a full-service creative agency specializing in helping brands grow fast. Engage your clients through compeling visuals that do the most marketing for you</p> <span><a href="#">Learn more</a></span> </div> </div> <div style="background-image: url(https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=600&height=400)" class="bg-cover bg-center text-center w-40 h-40 flex container flex-1 text-center"></div> </section> <section class="flex flex-col lg:flex-row"> <div style="background-image: url(https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=600&height=400)" class=" bg-cover bg-center text-center w-40 h-40 flex container flex-auto text-center"></div> </section>

Update flex-1 to flex-initial :

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <section> <div class="flex flex-1 flex-col items-center lg:items-start p-4"> <div class="px-28 pt-16"> <h2 class="text-3xl md:text-4xl lg:text-5xl mb-6 font-bold">Transform your brand</h2> <p class="mb-6">We are a full-service creative agency specializing in helping brands grow fast. Engage your clients through compeling visuals that do the most marketing for you</p> <span><a href="#">Learn more</a></span> </div> </div> <div style="background-image: url(https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=600&height=400)" class="bg-cover bg-center text-center w-40 h-40 flex container flex-1 text-center"></div> </section> <section class="flex flex-col lg:flex-row"> <div style="background-image: url(https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=600&height=400)" class=" bg-cover bg-center text-center w-40 h-40 flex container flex-initial text-center"></div> </section>

Update flex-1 to flex-auto , and remove parent class flex-col :

 <link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet"> <section> <div class="flex flex-1 flex-col items-center lg:items-start p-4"> <div class="px-28 pt-16"> <h2 class="text-3xl md:text-4xl lg:text-5xl mb-6 font-bold">Transform your brand</h2> <p class="mb-6">We are a full-service creative agency specializing in helping brands grow fast. Engage your clients through compeling visuals that do the most marketing for you</p> <span><a href="#">Learn more</a></span> </div> </div> <div style="background-image: url(https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=600&height=400)" class="bg-cover bg-center text-center w-40 h-40 flex container flex-1 text-center"></div> </section> <section class="flex lg:flex-row"> <div style="background-image: url(https://imagecdn.app/v1/images/https%3A%2F%2Fimages.unsplash.com%2Fphoto-1525923838299-2312b60f6d69?width=600&height=400)" class=" bg-cover bg-center text-center w-40 h-40 flex container flex-auto text-center"></div> </section>