1 reply

Positioning elements not responding as expected in Tailwind CSS

I'm currently working on a web project using Tailwind CSS and encountering issues with positioning elements. Despite applying the necessary Tailwind CSS classes, the elements are not responding as expected.

I have tried using utility classes such as absolute, relative, fixed, along with top, right, bottom, and left classes to control the positioning. However, the elements do not move or adjust their positions accordingly.

 <section class="services bg-black inline-block w-full h-full">
      <div class="support w-3/5 relative text-white ml-4 top-1/4">
        <h2 data-aos="fade-up" class="text-7xl">Supporting Businesses</h2>
        <p data-aos="fade-up" class="text-3xl">We empower individuals with the knowledge and tools necessary to thrive in their respective industries, we aim to create a thriving ecosystem of innovative and sustainable businesses.</p>
      </div>
      <div class="creative text-right relative w-3/5 m-4 text-white float-right top-1/3">
        <h2 data-aos="fade-up" class="text-7xl">Creatives/Entrepreneurs</h2>
        <p data-aos="fade-up" class="text-3xl">From creative artists to entrepreneurs we pride ourselves on redefining spaces and everyday items to attract, connect, and drive market sales that implement solutions.</p>
    </div>
    </section>

 <section class="services bg-black inline-block w-full h-full">
      <div class="support w-3/5 relative text-white ml-4 top-1/4">
        <h2 data-aos="fade-up" class="text-7xl">Supporting Businesses</h2>
        <p data-aos="fade-up" class="text-3xl">We empower individuals with the knowledge and tools necessary to thrive in their respective industries, we aim to create a thriving ecosystem of innovative and sustainable businesses.</p>
      </div>
      <div class="creative text-right relative w-3/5 m-4 text-white float-right top-1/3">
        <h2 data-aos="fade-up" class="text-7xl">Creatives/Entrepreneurs</h2>
        <p data-aos="fade-up" class="text-3xl">From creative artists to entrepreneurs we pride ourselves on redefining spaces and everyday items to attract, connect, and drive market sales that implement solutions.</p>
    </div>
    </section>

I am trying to have them spaced vertically with more space in between like the attachment shown.

Screen_Shot_2023-07-07_at_2.27.39_PM.png

KP-C

Kevin Powell - Community•3y ago•

1 reply

roycwilliams

Positioning elements not responding as expected in Tailwind CSS

 <section class="services bg-black inline-block w-full h-full">
      <div class="support w-3/5 relative text-white ml-4 top-1/4">
        <h2 data-aos="fade-up" class="text-7xl">Supporting Businesses</h2>
        <p data-aos="fade-up" class="text-3xl">We empower individuals with the knowledge and tools necessary to thrive in their respective industries, we aim to create a thriving ecosystem of innovative and sustainable businesses.</p>
      </div>
      <div class="creative text-right relative w-3/5 m-4 text-white float-right top-1/3">
        <h2 data-aos="fade-up" class="text-7xl">Creatives/Entrepreneurs</h2>
        <p data-aos="fade-up" class="text-3xl">From creative artists to entrepreneurs we pride ourselves on redefining spaces and everyday items to attract, connect, and drive market sales that implement solutions.</p>
    </div>
    </section>

 <section class="services bg-black inline-block w-full h-full">
      <div class="support w-3/5 relative text-white ml-4 top-1/4">
        <h2 data-aos="fade-up" class="text-7xl">Supporting Businesses</h2>
        <p data-aos="fade-up" class="text-3xl">We empower individuals with the knowledge and tools necessary to thrive in their respective industries, we aim to create a thriving ecosystem of innovative and sustainable businesses.</p>
      </div>
      <div class="creative text-right relative w-3/5 m-4 text-white float-right top-1/3">
        <h2 data-aos="fade-up" class="text-7xl">Creatives/Entrepreneurs</h2>
        <p data-aos="fade-up" class="text-3xl">From creative artists to entrepreneurs we pride ourselves on redefining spaces and everyday items to attract, connect, and drive market sales that implement solutions.</p>
    </div>
    </section>

I am trying to have them spaced vertically with more space in between like the attachment shown.

Positioning elements not responding as expected in Tailwind CSS

Positioning elements not responding as expected in Tailwind CSS

Similar Threads

Similar Threads

Similar Threads