Kevin Powell - Community•2w ago

Review my css & tell me how can i do responsive better

hey uhh i know it's too much to ask but can you check the sandbox my issue is about too many css breakpoints the design is rigid or probably i'm the one who doesn't know how to do it https://codesandbox.io/p/sandbox/fnlkxd it's better if you checked it on another window cause right now the design breaks i suppose so yeah

2 Replies

Dev_HKOP•2w ago

one input from a gal on another server

snxxwyy•2w ago

i don't have time to look through everything unfortunately, but these are a few things i picked up- 1) Following from what the other person you mentioned has said, you have too many breakpoints, you should have maximum 3 or a few more depending on the design per site, i would take a look at flexbox and grid. 2) You should probably organize your class names a bit better for easier management. I recommend BEM to start off with. In short, you have a primary block, each child following that is a relevant section of that block includes the block name and two underscores for a prefix e.g.

.card {...}

.card__content {...}

.card__links {...}

.card {...}

.card__content {...}

.card__links {...}

You can read more about it here https://getbem.com/introduction/ 3) Your elements inside of your ul need to be wrapped in li tags otherwise it's not valid syntax. 4) Your label for attributes need to include an id from an input element, not the input element's name attribute. 5) Try to avoid using br tags most of the time unless in specific situations. You don't really need to to force break text. If you really need to, you could use display: block to push it onto a new line. (i'm referencing your headings here) 6) You seem to be styling a lot of things with the > selector. This means "the direct child of". So if you say, div > p, it's targeting every p directly inside of a div. If there's a p tag inside of a section tag inside of that div, it won't target it. Try to use that if that is exactly what you need. Apologies if you are trying to do that. 8) Try not to style things based off of their id's e.g. #element {...}, id's main uses are for linking to elements in attributes and hooking into with js. Hope that helps out.

BEM — Block Element Modifier

BEM — Block Element Modifier is a methodology, that helps you to achieve reusable components and code sharing in the front-end.

Gaming

Programming

Review my css & tell me how can i do responsive better