How to make image and div with whitespace-nowrap be in one line using tailwind-css?
Question
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:
This is great. However, if I reduce my screen size, it becomes like below:
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.
1 answers
solution1
0 2022-01-23 09:07:31
First of all You have few cssConflicts in first div after section tag.:
-
flexandinline-block -
items-centeranditems-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>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.