我怎样才能让模态在桌面上变大？

Question

我正在尝试在我正在工作的网站上获取模态，以便在桌面上打开更大的窗口并在移动设备上更改为垂直视图，就像我在 Figma 中设计的这些示例：

.

任何有关我可以更改代码以反映这些图像的帮助都会很棒。

{showModal ? (
            <>
            
          <div
            className="justify-center items-center flex overflow-x-hidden overflow-y-auto fixed inset-0 z-50 outline-none focus:outline-none"
            onClick={() => setShowModal(false)}
          >
            
            <div className="relative w-auto my-6 mx-auto max-w-3xl grid grid-cols-2 "> 
            {/* which grid? number one */}
            <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
            <Image
        src={ImageLink}
        alt="Work?"
        width="600"
        height="600"
        layout="responsive"
        onClick={() => setShowModal(true)}

      />  

</div>
              {/*content*/}
              <div className="border-0 rounded-lg shadow-lg relative flex flex-col w-full bg-white outline-none focus:outline-none">
                {/*header*/}
                <div className="flex items-start justify-between p-5 border-b border-solid border-gray-300 rounded-t">
                  <h3 className="text-3xl font-semibold">
{Name}                  </h3>
                  <button
                    className="p-1 ml-auto bg-transparent border-0 text-black opacity-5 float-right text-3xl leading-none font-semibold outline-none focus:outline-none"
                    onClick={() => setShowModal(false)}
                  >
                    <span className="bg-transparent text-black opacity-5 h-6 w-6 text-2xl block outline-none focus:outline-none">
                      ×
                    </span>
                  </button>
                </div>
                {/*body*/}
                <div className="relative p-6 flex-auto">
                  <p className="my-4 text-gray-600 text-lg leading-relaxed">
                   {Description}
                  </p>
                </div>
                {/*footer*/}
                <div className="flex items-center justify-end p-6 border-t border-solid border-gray-300 rounded-b">
                  <button
                    className="text-red-500 background-transparent font-bold uppercase px-6 py-2 text-sm outline-none focus:outline-none mr-1 mb-1"
                    type="button"
                    style={{ transition: "all .15s ease" }}
                    // onClick={() => setShowModal(false)}
                  >
                    Contact
                  </button>
                  <button
                    className="bg-green-500 text-white active:bg-green-600 font-bold uppercase text-sm px-6 py-3 rounded shadow hover:shadow-lg outline-none focus:outline-none mr-1 mb-1"
                    type="button"
                    style={{ transition: "all .15s ease" }}
                    // onClick={() => setShowModal(false)}
                  >
Make an Offer                  </button>
                </div>
              </div>
            </div>
          </div>
          <div className="opacity-25 fixed inset-0 z-40 bg-black"></div>
        </>
      ) : null}
    </>
  );
}

我只是停留在顺风文档上 - 尝试使用网格系统，它只是不想工作并且很想了解我哪里出错了。

这是一个 link 到当前站点的链接，以查看它当前的外观 https://greenr-two.vercel.app/example

提前致谢，

Answer 1

这是一个简单的改变。

在移动设备上，grid-cols-1 和 col-span-1 会给图像 100%，div。

在桌面上，md:grid-cols-3 图像为 col-span-2 将消耗 66% (2/3 * 100)。而 div 和 col-span-1 将消耗 33% (1/3 * 100)。

<div class="grid grid-cols-1 md:grid-cols-3">
    <image class="col-span-1 md:col-span-2" />
    <div class="col-span-1"></div>
</div>

我怎样才能让模态在桌面上变大？

How can I get a modal to be larger on desktop?

reactjs

tailwind-css