Change the layout in index.astro.

[monitor14]

Hi ,developer ,I want to change the layout of index.astro as above , I just a beginner of frontend learner , can give any tips about it ? I try many idea but can't implement.

[satnaing]

It's been a while since you opened this. So, I'm not sure this has been solved yourself.

In case I have to create such layout, I would use Flexbox of CSS. (in this case TailwindCSS)

Code

<div class="flex flex-col gap-y-2 sm:flex-row sm:gap-x-6">
  <div class="mx-auto size-56 flex-none bg-cyan-300">SVG</div>
  <p>
    Lorem ipsum dolor sit amet consectetur adipisicing elit. Eligendi
    voluptates unde reiciendis labore. Alias nemo maiores assumenda
    voluptatibus sunt molestias eum, enim id dolorem autem quia incidunt
    deleniti a voluptate?
  </p>
</div>

Result:

Mobile

Tablet & Web

Closing this issue for now. If you have any problems, feel free to open a new discussion. Thanks for your understanding.