Layout is wrong

[hoyere]

I am fairly new to Tailwinds, and I am running a nextjs project. However when I use DivMagic the alignment is off. When i put the code onto a page it is inline vertical rather than retaining the the alignment across

I didnt know if it was me being new or not but I put this into GPT and it provided this. Do you know if it something I am not setting write in the extension? After GPT fixed it, it looked fine after a little adjustment on the max width and ensuring the image didnt get squished by having AI add a cover element to it.

GPT Response

The issue you're facing is likely due to the float-based layout in your original code. With Tailwind CSS, you can easily create a flexible layout using Flexbox or Grid to place the text and image side by side.

Here's how you can modify your code to make sure the text and button are on the left and the image is on the right:.....

Here, I've made the following changes:

Wrapped the whole content in a flex container. Used flex-wrap to make sure the content wraps correctly on smaller screens. Added justify-between to space out the two main divs. Assigned flex-1 to each div to take up equal space within the flex container. Now, your text and button should be on the left, and your image should be on the right, just like a typical hero section. GPT OUTPUT

`export default function Home() {
  return (
    <div className="flex flex-wrap text-stone-500 text-sm font-medium py-14 relative bg-white min-w-[1350px]">
      <div className="w-[80%] mx-auto flex flex-wrap justify-between" style={{ maxWidth: "67.50rem" }}>

        {/* Text and Button on Left */}
        <div className="flex-1 text-emerald-600 text-2xl leading-9 break-words">
          <h1 className="text-teal-600 text-5xl leading-none font-bold pb-3">Welcome to MY SITE!</h1>
          <p>Empowering YADA YADA</p>
          <a className="text-white bg-emerald-600 text-xl py-1 px-4 mt-4 rounded" href="https://MYWEBSITE/">Get Involved</a>
        </div>

        {/* Image on Right */}
        <div className="flex-1">
          <img className="w-full h-auto" src="http://MYWEBSITES/wp-content/uploads/2023/08/shopping.png" alt="Shopping"/>
        </div>

      </div>
    </div>
  )
}`

ORIGINAL DIVMAGIC
`
`<div className="text-stone-500 text-sm font-medium py-14 relative bg-white min-[1350px]:pt-14  min-[1350px]:pr-0 min-[1350px]:pb-14 min-[1350px]:pl-0">
  <div
    className="py-7 relative w-[80%] m-auto min-[1350px]:pt-7  min-[1350px]:pr-0 min-[1350px]:pb-7 min-[1350px]:pl-0"
    style={{
      maxWidth: "67.50rem",
    }}>
    <div className="float-left relative min-h-[0.06rem]">
      <div className="text-emerald-600 text-[2.00rem] leading-9 break-words relative">
        <div className="relative">
          <h1 className="text-teal-600 text-[4.88rem] leading-none font-bold pb-3">Welcome to MYWEBSITE!</h1>

          <p>Empowering YADA YADA</p>
        </div>
      </div>
      <div className="relative">
        <a className="text-white bg-emerald-600 text-xl py-1 px-4 relative inline-block rounded" href="https://MYWEBSITE/">
          Get Involved
        </a>
      </div>
    </div>
    <div className="float-left relative min-h-[0.06rem]">
      <div className="relative mr-auto">
        <span className="relative inline-block">
          <img className="relative w-[34.92rem] h-[31.55rem]" src="http://MYWEBSITE/wp-content/uploads/2023/08/shopping.png" />
        </span>
      </div>
    </div>
  </div>
</div>`

[RealBrianH]

Hello @hoyere,

Are you using the latest version? Version 2.0.9 (October 20)

If you use the Adaptable copy mode, DivMagic will do optimizations to provide the smallest amount of copied code.

This may result in styles that look slightly different from the source.

Using the Exact copy mode should give you the exact alignment you see on the source website. However, I highly recommend that you use the Adaptable copy option. Even if the copied style is different than the source, you can make minor modifications to the CSS to get the desired output.

The purpose of DivMagic doing modifications on the style is to give you the smallest possible code output so you can customize it fast for your own website.

If you have any further questions or issues, please don't hesitate to reach out. We're here to help!

[hoyere]

That seems to have done the trick