Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

layout issue #23

Open
heybbxbeats opened this issue Oct 4, 2024 · 1 comment
Open

layout issue #23

heybbxbeats opened this issue Oct 4, 2024 · 1 comment

Comments

@heybbxbeats
Copy link

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
Copy link
Member

Nemikolh commented Oct 7, 2024

Hey @heybbxbeats! 👋 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!

igoraguiar pushed a commit to igoraguiar/bolt.new that referenced this issue Oct 24, 2024
GQAdonis pushed a commit to tribe-health/bolt.new-extended that referenced this issue Nov 10, 2024
@kc0tlh kc0tlh removed the tracked label Nov 25, 2024
wonderwhy-er pushed a commit to wonderwhy-er/bolt.myaibuilt.app_hosted-Bolt.New-oTToDev that referenced this issue Dec 2, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants