CODEWITHSUNDEEP
htmlcssflexboxtailwind-css
Avi Thour
Avi Thour

Reputation: 410

Flex items responsive issues

I am using Tailwind and I made this div: enter image description here

The problem is that it looks like this when I shrink it down: enter image description here

With white-space: nowrap it goes out of the div. enter image description here

I am not able to fix this issue. However, I have made it go into columns when it goes below md screen however not sure how I can stop it from making another line when resolution changes.

Code:

<div className='bg-gray-1000 rounded shadow border border-opacity-50 text-white flex flex-col lg:flex-row w-7/12 mx-auto justify-between p-2 mb-2 items-center md:space-x-16 whitespace-nowrap'>

            <div className='bg-primary rounded w-14 h-14 flex items-center'>
                <img src={props.logo}/>
            </div>

            <div className='flex flex-col flex-grow'>
                <div>{props.title}</div>
                <div className='flex'>
                    <div><img className='w-6 mt-1' src={props.flag}/></div>
                    <div><FaInfoCircle className='inline ml-2 text-xl'/></div>
                    <div><button className={`ml-2 rounded px-4 py-0 text-sm uppercase bg-${props.color}-600`} disabled>{props.mode}</button></div>
                </div>
            </div>

            <div className='flex flex-col'>
                <div><FaCalendar className='inline mr-2 text-xl'/> {props.date}</div>
                <div className='mt-1'><FaClock className='inline mr-2 text-xl'/> {props.time}</div>
            </div>

            <div className='flex flex-col'>
                <div> <FaUsers className='inline mr-2 text-xl'/> {props.vs}</div>
                <div className='mt-1'><FaUsers className='inline mr-2 text-xl'/> {props.slots} Slots</div>
            </div>

            <div className='flex flex-col md:pr-4'>
                <div><AiFillDollarCircle color='green' className='inline mr-2 text-xl'/></div>
                <div className='mt-1'><AiFillTrophy className='inline mr-2 text-xl md:text-2xl'/> {props.prize}</div>
            </div>

    </div>

Upvotes: 1

Views: 168

Answers (1)

fevid
fevid

Reputation: 743

the best solution for you if you don't want to make the fonts smaller, IMO would be: adding a wrapper on three columns at the right and making it a flex with justify-content: space-between.

It will adjust the gaps according the space left for use.

seems your title at the left content is dynamic and it can get really long, try limiting text width and using text-overflow: ellipsis on it. otherwise you cannot fit long text beside other content.

Upvotes: 1

Related Questions