@MohammedBentalb
@mohammedbahnini
Submitted
Hi coders, I hope you're doing well, I've just finished this challenge using a simple library I created myself to help me build up projects in a faster way using some sass. Iv' tested it in two challenges and it's really amazing, I am so proud of the result I came up with, any feedback will be highly appreciated.
@MohammedBentalb
Posted
It looks great, yet, the top-right image in the header is causing an overflow when resizing the browser or switching to mobile screens.
Marked as helpful
@rajjubajra
Submitted
I've implemented the Product Cart functionality using Redux Toolkit for state management and styled it with Tailwind CSS. Please take a look and share your feedback.
@MohammedBentalb
Posted
Hello Bajrard, the website does indeed work smoothly. Yet, sticking to the design would be a huge benefit too since it's the first thing that a user deals with, I recommend :
(it holds the entire screen , imagine having ultra-wide screen, you need to set a limit*)(they also stretch as the container stretch to the edges)Other than that, u may need to start tweaking CSS
Marked as helpful
@Professormood
Submitted
still learning
@MohammedBentalb
Posted
hello Santosh, hope you're doing well.
the design is impressive, yet consider to have a max-width on the container since the layout keeps stretching to the end of screen edges , maybe 1440 would be good
cheers
Marked as helpful
@HiQendresa
Submitted
@MohammedBentalb
Posted
hello Qendresa, I do like how your projects are getting better and better, and closer to the design and some even match great but u need to know that the design is not responsive (centered) on devices that are bigger than 1440px, (most of your projects), most because (as I saw in some projects) mostly because you define the body to be max-width of 1440px and that's unadvisable
here are better ways to handle it :
not the body to a max-width of 1440pxand center it using either grid or flex(flex is easier)or simply by using margin on elements(it depends on how the elements are styled )`.if you happen to be working on a device with a screen < 1440px you can still preview other sizes by devTools , and try extra wide dimensions to see the project's look.
cheers
Marked as helpful
@faizal789
Submitted
how can i improve
@MohammedBentalb
Posted
Hello!!, consider having a look at x-sm screens like galaxy z-flod (270px wide u will see it in dev tools ) other than that it looks cool, well done
@MosesElite69
Submitted
1 - I'm not sure if using div within each other was smart, so let me know if there was better option.
2 - I'm not sure how to avoid the QR code from clipping outside the div, so let me know please.
3 - Suggest how to improve as this is my first project :)
@MohammedBentalb
Posted
Hello Elliot, hope you're doing well, as this project isn't that much to show your weaknesses, It's obvious that only the shape matches the design. I'm just an intermediate dev, yet I would encourage you to stick as much as you can to the design and look up for things that u couldn't do/handle (some good ones for CSS and HTML u can look for Kevin Powell, web dev simplified and developedbyed) (those have some friendly beginning videos)
aspect-ratio in CSS for images, and try to not define its width in CSS unless u have to and let it depend on the width of the outer container while having a padding in the inside.(take this only as reference (maybe what I said wouldn't match your way of building things or maybe not perfect enough) as even I need to keep learning then )
have a good one
Marked as helpful
@Big-Naseer
Submitted
Someone should please help me inspect my code.
@MohammedBentalb
Posted
Nice work, yet it could be better here are some notes that you may take into consideration:
Marked as helpful
@Posedion1920
Submitted
how do you limit paragraphs character width
the picture is buggy or something. i can see the picture in live server but wont show up when i run the html file
@MohammedBentalb
Posted
consider using ch or target your width using a container width or maybe check the usage of clamp() (CSS ) (it's a cool property)
