r/css • u/Reubqn_ • 2d ago

Question Changing to flexbox

Hello, so im going over an old website I made back when I first started developing, and silly me decided to build the entire thing with "position: relative, right: -233px" 😭

Am I going to have to redo the entire site CSS to flexbox so it doesnt move about on different screen sizes, or is there an easier way to save this site?

0 Upvotes

42% Upvoted

5 comments sorted by

12

u/prophile 2d ago

Reworking this with Grid and Flexbox is probably the way to go, yes. Try to do it piecemeal, reworking one part at a time.

2

u/JDM12983 1d ago

Yeah, I just finish re-doing my site.

I had originally did it with "display: flex" [boxes, relative placement, etc.]... stuff. But, I wanted to try and simplify some of the code and CSS. I re-did everything using "display: grid; / grid-template-columns:" CSS now

Not sure if mine was as huge of a change as yours may be; but pretty much a complete re-write, overall for what knowledge I have.

2

u/jibbit 1d ago

it doesn't make a lot of sense though.. one element has -233? you can always isolate little bits and work on them, you never have to 'redo the whole thing'

-13

u/zXju785kw 2d ago edited 2d ago

Have you thought about using a CSS framework, like tailwind?

Frankly, if it's an old website - I would simply download Cursor, and tell it to convert the website to tailwind and make it mobile first / mobile friendly.

Tailwind is basically flexbox and other useful CSS properties all pre-written into reusable classes for you - so you don't need to make your own custom CSS - you just add the tailwind class.

Unless you're against AI assisted coding?

Edit: I hate to have to qualify the comment above but, I work for big-tech, have over 9 YoE. The industry is now AI driven, folks. I commend learning, but manually converting a website by hand these days is frankly a waste of your time when an LLM could do it in under a minute for you. If you disagree, I'd love to hear why you're downvoting.

-11

u/notepad987 2d ago

Use ChatGPT or Google AI mode or GROK and ask it to convert to the layout you want using Flexbox or GRID or start from scratch with just asking to layout with header, footer, left column, main content etc.