search

stackblitz / bolt.new

Prompt, run, edit, and deploy full-stack web applications
https://bolt.new
MIT License
8.75k stars 3.43k forks source link

layout issue #23

Open heybbxbeats opened 1 month ago

heybbxbeats commented 1 month ago

Describe the bug

No matter what I do or say, it just won't fix the layout and positioning of the website. It's stuck in a mobile view design and I want it to expand for desktop view, if that makes sense...

Link to the Bolt URL that caused the error

https://bolt.new/~/sb1-yc9bpd

Steps to reproduce

  1. Ask it to fix the layout of the theme
  2. Ask it to change the responsiveness or layout

Expected behavior

Not listening or doing what is asked

Screen Recording / Screenshot

No response

Platform

Browser name = Firefox
Full version = 130.0
Major version = 130
navigator.appName = Netscape
navigator.userAgent = Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:130.0) Gecko/20100101 Firefox/130.0
performance.memory = undefined
Username = heybbxbeats
Chat ID = 8b658a9bf676

Additional context

Message:

I apologize for the confusion. It seems the layout is still not centered as desired. Let's make further adjustments to ensure the website is properly centered. We'll modify the App.tsx file to achieve this.

<div class="__boltArtifact__" data-artifact-id="3:fully-centered-layout" data-running-actions="true"></div>

I've made the following changes to ensure the website is properly centered:

1. Adjusted the main content area to have a maximum width of `max-w-3xl`, which provides a good balance for various screen sizes.
2. Centered the main content both horizontally and vertically using `flex items-center justify-center`.
3. Added padding to the main content area with `p-4` to ensure it doesn't touch the edges on smaller screens.
4. Increased the size of the main heading to `text-4xl` for better visibility.
5. Limited the width of the search bar container to `max-w-xl` to keep it proportional on larger screens.
6. Adjusted the grid for search results to be more responsive: `grid-cols-2 sm:grid-cols-3`.

These changes should ensure that the website is properly centered and looks good on various screen sizes. The content should now be in the center of the page, and the layout should be more balanced overall.

The development server is already running, so you should see these changes reflected immediately in the browser. Let me know if you want any further adjustments or have any questions!
Nemikolh commented 1 month ago

Hey @heybbxbeats! :wave: Thanks for opening this issue!

What you said makes total sense, sometimes it's hard for Bolt to understand those differences. It's all about providing the right prompt and it also seems there's a bit of a luck factor.

For that type of issues, I tend to fix them myself through the editor.

We will try to improve it and over time it should get better!