@sandro21-glitch
Posted
Hi Othman
Here are some suggestions to improve the code
Use CSS reset to standardize the default styles across different browsers.
Use CSS variables for color values, so that it's easier to change the color palette in the future.
Consider using CSS Flexbox or CSS Grid for layout, especially if you plan to have more elements in the future.
Using absolute positioning to center an element has some limitations, such as not being flexible with the size of the parent container. An alternative solution is to use Flexbox or Grid layout for centering elements.
With Flexbox, you can center an element both vertically and horizontally using the following CSS:
.container { display: flex; align-items: center; justify-content: center; height: 100vh; /* or any desired height */ }
.centered-element { /* styles for the centered element */ }
With Grid, you can center an element in a similar way:
.container { display: grid; place-items: center; height: 100vh; /* or any desired height */ }
.centered-element { /* styles for the centered element */ }
Happy Coding
Marked as helpful
@Francisco-M-Miranda
Posted
@sandro21-glitch
It's better if you use min-height: 100vh; instead height: 100vh; within .container
Marked as helpful
@sandro21-glitch
Posted
@Francisco-M-Miranda
Yes, that's correct.
If you have only one container in the center of the page and are using height to set its height to 100vh, then you might encounter issues with content overflow or content being hidden if the content is taller than the viewport. In such cases, using min-height: 100vh; would be a better option, as it will ensure that the container takes up at least 100vh of the viewport, but can expand to accommodate its contents if they are taller than 100vh.
@OzmanGh
Posted
@sandro21-glitch First of all, thank you so much for your feedback, this really helpful. Most of the time for more complex designs, I've used CSS grid for multi-dimensional layout and Flex-box for normal layout since this was simple I didn't consider using them but I'm aware know about flexibility issues. I didn't get what did you mean by saying CSS reset? On the other hand, I have no idea how to use CSS variables yet 😅. since it's my first time here may I ask how can I fix or change my code is it from the GitHub repositories
@OzmanGh
Posted
@Francisco-M-Miranda Thanks for your feedback this was really helpful😊.
