css Question posted in
Some basic documentation can be found here.

Css – Tailwind BreakPoints Not

I am build a simple div on that i want px-5 for mobile screen and px-20 for larger screen but only px-5 is working px-20 not working on large screen why?

Code Output Image

 <div class="bg-white py-20  px-5  lg:px-20 ">
        <div class="w-full md:w-1/2 mx-auto space-y-8">
          <div class="bg-white py-20 rounded-xl shadow-lg p-6 flex flex-col items-center justify-between">
            <div class="flex flex-col md:flex-row items-center justify-between w-full">
              <div class="flex py-4 flex-col md:flex-row justify-start w-full h-full">
                <div class="flex flex-col lg:ml-10  md:items-start">
                  <h2 class="text-xl md:text-4xl font-semibold mb-2 text-center md:text-left">
                    Lorem ipsum dolor sit
                  </h2>
                  <p class="text-gray-600 text-center md:text-left">
                    Porem ipsum dolor sit amet, consectetur adipiscing elit.
                  </p>
                </div>
              </div>
              <div className="flex flex-col justify-center sm:justify-center lg:justify-end md:flex-row mt-4 md:mt-0 w-full ">
                <input
                  type="text"
                  placeholder="Enter email here"
                  className="lg:w-96 sm:w-1/2 py-2 px-2 sm:px-10 border border-gray-300 rounded-sm focus:outline-none focus:border-indigo-500 transition duration-150 ease-in-out"
                  // Adjust the width here, sm:w-1/2 means the input width will be half of the container on small screens and above
                />
                <button
                  className="mt-3  lg:w-1/3 sm:mt-0 flex items-center justify-center md:ml-4 text-white py-3 px-4 rounded-sm hover:bg-orange-700 focus:outline-none focus:bg-orange-700 transition duration-150 ease-in-out"
                  style={{ backgroundColor: "#F68219" }}
                  // Adjust the width here, sm:w-1/2 means the button width will be half of the container on small screens and above
                >
                  Start E-Filling Now
                  <img src="/arrow.svg" alt="" className="ml-2" />
                </button>
              </div>
            </div>
          </div>
        </div>
      </div>

Expected Result Image

i want px-20 on large screen as shown in second image

Tags:

2

Answers


  1. 0

    If you want the margin on the left and right of the div, use margin instead padding.

     <div class="bg-white py-20 mx-5 lg:mx-20">
    Login or Signup to reply.
  2. 0 
    <div className="bg-white py-20  px-5  lg:px-20 ">
  <div className="w-full  mx-auto space-y-8">
    <div className="bg-white py-20 rounded-xl shadow-lg p-6 flex flex-col items-center justify-between lg:mx-20">
      <div className="flex flex-col md:flex-row items-center justify-between w-full">
        <div className="flex py-4 flex-col md:flex-row justify-start w-full h-full">
          <div className="flex flex-col lg:ml-10  md:items-start">
            <h2 className="text-xl md:text-4xl font-semibold mb-2 text-center md:text-left">
              Lorem ipsum dolor sit
            </h2>
            <p className="text-gray-600 text-center md:text-left">
              Porem ipsum dolor sit amet, consectetur adipiscing elit.
            </p>
          </div>
        </div>
        <div className="flex flex-col justify-center sm:justify-center lg:justify-end md:flex-row mt-4 md:mt-0 w-full ">
          <input
            type="text"
            placeholder="Enter email here"
            className="lg:w-96 sm:w-1/2 py-2 px-2 sm:px-10 border border-gray-300 rounded-sm focus:outline-none focus:border-indigo-500 transition duration-150 ease-in-out"
            // Adjust the width here, sm:w-1/2 means the input width will be half of the container on small screens and above
          />
          <button
            className="mt-3  lg:w-1/3 sm:mt-0 flex items-center justify-center md:ml-4 text-white py-3 px-4 rounded-sm hover:bg-orange-700 focus:outline-none focus:bg-orange-700 transition duration-150 ease-in-out"
            style={{ backgroundColor: "#F68219" }}
            // Adjust the width here, sm:w-1/2 means the button width will be half of the container on small screens and above
          >
            Start E-Filling Now
            <img src="/arrow.svg" alt="" className="ml-2" />
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

    Check this out and compare. You were using the tailwind utilities in the wrong div. You can modify this piece of code to get what you expect.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search