OiO.lk Community platform!

Oio.lk is an excellent forum for developers, providing a wide range of resources, discussions, and support for those in the developer community. Join oio.lk today to connect with like-minded professionals, share insights, and stay updated on the latest trends and technologies in the development field.
  You need to log in or register to access the solved answers to this problem.
  • You have reached the maximum number of guest views allowed
  • Please register below to remove this limitation

Tailwind text padding and marging is not perfect on md

  • Thread starter Thread starter Nacho Imperium
  • Start date Start date
N

Nacho Imperium

Guest
i have a problem with my code

Code:
<motion.div variants={fadeIn('up', 'tween', 0.2, 1)}
        className="flex flex-col items-center justify-center
        lg:px-0 lg:py-0">
<div className="flex flex-row items-center justify-center gap-4">
    <div className="flex flex-col items-center justify-center">
<span
    className="absolute bg-gradient-to-r blur-xl
    from-blue-500 via-teal-500 to-pink-500 bg-clip-text text-2xl md:text-5xl
    font-extrabold text-transparent md:mt-20">
  {t('Pricing.Flexible')}
</span>
        <h1 className="relative justify-center text-center select-auto
font-poppins text-2xl font-semibold md:text-5xl md:mt-20
bg-gradient-to-r from-blue-500 via-teal-500 to-pink-500 text-transparent bg-clip-text">
            {t("Pricing.Flexible")}
        </h1>
    </div>
    <h1 className="font-poppins text-2xl font-semibold md:text-5xl md:mt-20">
        {t('Pricing.Title')}
    </h1>
</div>

On "lg" it's perfect like this: Picture

But on md and lower Picture2

Can someone help me? Thanks for your answers :)
<p>i have a problem with my code</p>
<pre><code><motion.div variants={fadeIn('up', 'tween', 0.2, 1)}
className="flex flex-col items-center justify-center
lg:px-0 lg:py-0">
<div className="flex flex-row items-center justify-center gap-4">
<div className="flex flex-col items-center justify-center">
<span
className="absolute bg-gradient-to-r blur-xl
from-blue-500 via-teal-500 to-pink-500 bg-clip-text text-2xl md:text-5xl
font-extrabold text-transparent md:mt-20">
{t('Pricing.Flexible')}
</span>
<h1 className="relative justify-center text-center select-auto
font-poppins text-2xl font-semibold md:text-5xl md:mt-20
bg-gradient-to-r from-blue-500 via-teal-500 to-pink-500 text-transparent bg-clip-text">
{t("Pricing.Flexible")}
</h1>
</div>
<h1 className="font-poppins text-2xl font-semibold md:text-5xl md:mt-20">
{t('Pricing.Title')}
</h1>
</div>
</code></pre>
<p>On "lg" it's perfect like this:
<a href="https://i.sstatic.net/rRNcWzkZ.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/rRNcWzkZ.png" alt="Picture" /></a></p>
<p>But on md and lower
<a href="https://i.sstatic.net/826WepfT.png" rel="nofollow noreferrer"><img src="https://i.sstatic.net/826WepfT.png" alt="Picture2" /></a></p>
<p>Can someone help me?
Thanks for your answers :)</p>
Continue reading...
 
Top