How to Put Image Slightly Above the Card using Tailwind CSS in Mobile and Tablet-CodePudding

Note: It works well on Desktop but in Mobile and Tablet does not work on. Hoping for a help at the StackOverflow Community.

     <div>
          <div className='justify-center mt-16 md:pb-6 lg:pb-0 lg:flex lg:mx-36 md:mx-auto rounded-2xl bg-neutral-800'>
            {/* Column 1 */}
            <div className="-mt-10 lg:relative">
              <Image
                src="/images/review/[email protected]"
                width={290}
                height={290}
                alt="people"
                className="w-56 mx-auto rounded-xl lg:w-72"
              />
            </div>
    
            {/* Column 2 */}
            <div>
              <Image
                src="/images/review/patternCurveDiagonalLine.png"
                width={60}
                height={60}
                alt="Curve Diagonal Line"
                className="mx-auto mt-10 lg:mt-32 lg:mx-14"
              />
            </div>
            {/* Column 3 */}
            </div>
          </div>
        </div>

CodePudding user response：

Check Tailwind's documentation on Position.

There is section "Absolutely positioning elements" where it is described same thing you want to do: https://tailwindcss.com/docs/position#absolutely-positioning-elements

CodePudding user response：

You have defined mt-16 in the parent div. So -mt-10 is cut from mt-16 , so you can witness 16 - 10 = 6 i.e mt-6 in the mobile.

To overcome that remove mt-16 in the parent div.

Change

<div className='justify-center mt-16 md:pb-6 lg:pb-0 lg:flex lg:mx-36 md:mx-auto rounded-2xl bg-neutral-800'>

<div className='justify-center md:pb-6 lg:pb-0 lg:flex lg:mx-36 md:mx-auto rounded-2xl bg-neutral-800'>