How to get proper css from chatgpt

Prompting
1

I’m trying to change the width of a sticky header to 75vw to match the rest of the content on my website ihatecbts,net
I’ve been told there aren’t any settings to enable this but that I can use css. I’ve tried css from Chat GPT ,which work ok when the page is static but as soon as I start scrolling the header returns to full width.
Can you advise me how to get proper css from chatgpt?

2

hi,
The question is fairly ambiguous but pasting the html in question into the prompt followed by something akin to: generate a class that sets the [css path to header or id] as sticky and constrained to the width of [content path ].
But strikes me that you are working within some sort of CMS or existing framework, so you may need to include a reference to the to the framework used.
Not knowing you skill level, the limitations in place, and certainly not wanting to offend, if you’ve not tried something like:
.header, .content {
width: 75vw;
display: inline-block;
}
with all of the overly used but infinitely handy additions: !important, max-width…it’s a good place to start.
Sorry I could be more help.
-K

3

I’ve done this with my use of MediaWiki and asked my persona of Ford Prefect to help me make changes. It didn’t get it right the first time so I just kept asking it to make refinements. I also looked up alternate sources online that could help and gave it to Ford so that could further help his advice. But over the years I’ve learned, CSS has its limits.

4

That scroll effect is happening somewhere down the line on the website, whether added by CSS, JS, or some kind of a web design app. As @UEyeBallinMeSon notes, it looks like you’re using a CMS.

In the case of the latter, you can probably find the scroll effect and turn it off through the CMS’s UI for the header.

Or, you can probably have ChatGPT parse the DOM and the other available CSS/JS from the live site to figure out exactly where the problem is occurring.

Or, if you have access, you can just feed it the full CSS files and it will help you find the conflict.

Or, you could use !important for your new CSS and it should override everything. But that’s messy, and unadvisable for the long term.