1

I have three elements in one div. The third one goes beneath the rest of them when a certain threshold of the screen width is passed compiling some sort of a pyramid. How do I change this threshold?

<div className="flex justify-center items-center flex-wrap space-x-[10rem] mt-20">
    <div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 skew-x-[15deg]">
      <div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
        <div className="flex justify-center text-center mt-4">
          <span className="flex font-semibold skew-x-[-15deg]">Technologies</span>
        </div>
        <div className="flex items-center justify-center text-center align-middle mt-6">
          <span className="flex skew-x-[-15deg]"></span>
        </div>
      </div>
    </div>

    <div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-[#4dff03]  to-[#00d0ff] skew-x-[15deg]">
      <div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
        <div className="flex justify-center text-center mt-4">
          <span className="flex font-semibold skew-x-[-15deg]">My values</span>
        </div>
        <div className="flex items-center justify-center text-center align-middle mt-6">
          <span className="flex skew-x-[-15deg]"></span>
        </div>
      </div>
    </div>

    <div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-pink-500 to-yellow-500 skew-x-[15deg]">
      <div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
        <div className="flex justify-center text-center mt-4">
          <span className="flex font-semibold skew-x-[-15deg]">Properties</span>
        </div>
        <div className="flex items-center justify-center text-center align-middle mt-6">
          <span className="flex skew-x-[-15deg]"></span>
        </div>
      </div>
    </div>
  </div>
Jp_
  • 5,973
  • 4
  • 25
  • 36
stam
  • 109
  • 2
  • 6
  • I recommend to add a snippet containing the CSS as well. The snippets can be run in StackOverflow directly, check an example of it in https://stackoverflow.com/a/4753609/3646180 – Jp_ Aug 31 '22 at 13:22

1 Answers1

0

You have a better way to create the gaps. Instead of using space-x-[10rem] you can simply use gap-[10rem]. But anyway, I wouldn't use a gap here.

Instead of centering your divs using justify-center you can use justify-between. This way, your gaps will be created automatically without the need to define a constant value.

Now, if you don't want to give your divs an option to go beneath the other divs, don't use flex-wrap here. having flex-wrap will force your items to flow to another line.

flex-wrap:

The flex-wrap property is a sub-property of the Flexible Box Layout module. It defines whether the flex items are forced in a single line or can be flowed into multiple lines.

Your code should look like this:

<div className="flex justify-between items-center mt-20">
    <div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-indigo-500 via-purple-500 to-pink-500 skew-x-[15deg]">
      <div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
        <div className="flex justify-center text-center mt-4">
          <span className="flex font-semibold skew-x-[-15deg]">Technologies</span>
        </div>
        <div className="flex items-center justify-center text-center align-middle mt-6">
          <span className="flex skew-x-[-15deg]"></span>
        </div>
      </div>
    </div>

    <div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-[#4dff03]  to-[#00d0ff] skew-x-[15deg]">
      <div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
        <div className="flex justify-center text-center mt-4">
          <span className="flex font-semibold skew-x-[-15deg]">My values</span>
        </div>
        <div className="flex items-center justify-center text-center align-middle mt-6">
          <span className="flex skew-x-[-15deg]"></span>
        </div>
      </div>
    </div>

    <div className="flex justify-center items-center align-middle select-none w-[13rem] h-[16rem] rounded-[0.3rem] bg-gradient-to-r from-pink-500 to-yellow-500 skew-x-[15deg]">
      <div className="absolute justify-center items-center align-middle w-[18rem] h-[12rem] bg-transculent backdrop-blur-[0.625rem] rounded-[0.3rem]">
        <div className="flex justify-center text-center mt-4">
          <span className="flex font-semibold skew-x-[-15deg]">Properties</span>
        </div>
        <div className="flex items-center justify-center text-center align-middle mt-6">
          <span className="flex skew-x-[-15deg]"></span>
        </div>
      </div>
    </div>
</div>
  1. Removed space-x-[10rem].
  2. Removed flex-wrap.
  3. Replaced justify-center to justify-between.
ChenBr
  • 1,671
  • 1
  • 7
  • 21
  • It goes beneath the rest of the elements automatically and it looks ugly. I DO want it to go beneath the rest of the element but do it only when a certain width is reached (not the default one) – stam Aug 30 '22 at 18:06
  • is the screen width that it looks ugly on a popular device size? Often us web devs are the only ones who ever see a site at the weird in between screen sizes, so this could be a non-issue depending – JDawwgy Aug 30 '22 at 18:11
  • In this case, you can use [responsive utilities](https://tailwindcss.com/docs/responsive-design). For example, those classes: `flex-wrap sm:flex-nowrap` will make it so your elements will start wrapping only when the width of your screen is smaller than 640px. You can customize your breakpoints if you have a specific width. Here's an example with the tailwind playground: https://play.tailwindcss.com/Gf9I1Zsifs – ChenBr Aug 30 '22 at 18:12
  • @ChenBR, look. Right after a certain width is reached, I wanted this pyramid to compile. – stam Aug 30 '22 at 18:14
  • This way? `
    ` Link: https://play.tailwindcss.com/2X3THUgkAw
     – ChenBr Aug 30 '22 at 18:16
  • @ChenBR, not altogether. If the screen width dwindles up to a certain value, I get this pyramid, right? It dwindles only when a half of the third element is concealed beyond the screen, this is ugly, right? I want this wrap which compiles a pyramid to take place slightly earlier than when a half of the third element is conceal beyond the screen. – stam Aug 30 '22 at 18:29
  • It sounds like you need to do some tweaking with the [responsive utilities](https://tailwindcss.com/docs/responsive-design). As I said you can create custom breakpoints for your specific screen size. Here's another example with some tweaking: https://play.tailwindcss.com/bJvjbyTUHQ It's difficult to understand what you try to achieve.. maybe create some images illustrating it? – ChenBr Aug 30 '22 at 18:36
  • @ChenBr, dwindle the page here: https://sfdsdfdsf-k7gsp5jtp-kul-sudo.vercel.app/ A half of the last element is concealed before it finally compiles the pyramid – stam Aug 30 '22 at 18:59
  • Not a half indeed, but a lot – stam Aug 30 '22 at 19:00
  • I want roughly this distance to be between the edge and the third element before it turns into a pyramid https://imgur.com/a/BM0rREm – stam Aug 30 '22 at 19:02
  • This is because you're still using `space-x-[10rem]`. It applies margins to your second and third element. Also, you cannot use `1100px:flex-nowrap`, read the docs that I already sent twice.. Try to use gap instead or space-x or just get back to my original answer. I gave you many solutions that will solve your problem. – ChenBr Aug 30 '22 at 19:05
  • Try to use `justify-around` and remove the gap completely. – ChenBr Aug 30 '22 at 19:06
  • @ChenBr Putting your solutions together, I resolved I would use transform – stam Aug 30 '22 at 19:14
  • Sure thing. I would recommend you read and understand how responsive utilities work in Tailwind. Also, I would refrain from using the `flex` class so many times, you're using it on elements that don't need to have them. – ChenBr Aug 30 '22 at 19:17