How to make image and div with whitespace-nowrap be in one line using tailwind-css?

user_15218250 0
Viewed 358

I basically want to make a picture and div with whitespace-nowrap be in one horizontal line regardless of the screen size using tailwind css. First of all, here is a picture when I have it on full screen:

enter image description here

This is great. However, if I reduce my screen size, it becomes like below: enter image description here

Just to be clear, I don't mind my text going over the screen due to whitespace-nowrap. However, I want my picture to be on the RIGHT side of the paragraph, not on the paragraph like below. So, I want my picture to be on the right side even though we won't be able to see the picture on the screen(unless ofcourse you scroll right). Here is my html:

<section class="text-gray-600 body-font bg-white">
  <div class="container mx-auto flex px-5 md:px-40 py-24 md:flex-row flex-col items-center items-stretch inline-block">
    <div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
      <h1 class="title-font sm:text-xl text-lg mb-4 font-medium text-gray-500 tracking-tighter">
        small heading
      </h1>
      <h1 class="title-font sm:text-5xl text-3xl mb-4 font-bold text-gray-900 tracking-normal 2xl:whitespace-normal whitespace-nowrap">
        title for the div
      </h1>
      <p class="mt-5 mb-8 leading-relaxed text-xl 2xl:whitespace-normal whitespace-nowrap">
        <span class="text-yellow-600 font-bold text-2xl">Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure ipsum laudantium, consectetur in deserunt veniam. Asperiores fugiat necessitatibus nisi minus? Maiores ab, tempore quibusdam accusamus neque cum id modi esse.</span>
      </p>
    </div>
    <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
      <a href="" target="_blank">
        <img class="object-cover object-center rounded" alt="tip_book" src="https://dummyimage.com/720x600">
      </a>
    </div>
  </div>
</section>

Thank you, and please leave any comments or questions you have.

tailwind-css css html
1 Answers

First of all You have few cssConflicts in first div after section tag.:

  1. flex and inline-block
  2. items-center and items-stretch

I allowed myself to remove them, next You can see the rest below, I hope I understand You well and You will be satisfied ;-) And if You would like the image on the right to look better, I suggest adjusting the text on the left to the screen resolution ;-)

<!doctype html>
<html>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
  <section class="text-gray-600 body-font bg-white">
    <div class="container mx-auto flex px-5 md:px-40 py-24 flex-row items-center">
      <div class="lg:flex-grow md:w-1/2 lg:pr-24 md:pr-16 flex flex-col md:items-start md:text-left mb-16 md:mb-0 items-center text-center">
        <h1 class="title-font sm:text-xl text-lg mb-4 font-medium text-gray-500 tracking-tighter">
          small heading
        </h1>
        <h1 class="title-font sm:text-5xl text-3xl mb-4 font-bold text-gray-900 tracking-normal 2xl:whitespace-normal whitespace-nowrap">
          title for the div
        </h1>
        <p class="mt-5 mb-8 leading-relaxed text-xl 2xl:whitespace-normal">
          <span class="text-yellow-600 font-bold text-2xl">
              Lorem ipsum dolor sit amet consectetur adipisicing elit. Iure
              ipsum laudantium, consectetur in deserunt veniam. Asperiores
              fugiat necessitatibus nisi minus? Maiores ab, tempore quibusdam
              accusamus neque cum id modi esse.
            </span>
        </p>
      </div>
      <div class="lg:max-w-lg lg:w-full md:w-1/2 w-5/6">
        <a href="" target="_blank">
          <img class="object-cover object-center rounded" alt="tip_book" src="https://dummyimage.com/720x600" />
        </a>
      </div>
    </div>
  </section>
</body>

</html>

user_137059790
Related