search

Kanika637 / amazon-clone

Clone of Amazon Website
MIT License
89 stars 100 forks source link

Enhancement: Make header responsive and some minor changes to header #79

Closed ShubhamPatil0723 closed 1 year ago

ShubhamPatil0723 commented 1 year ago

The header is not responsive, the position is sticky and the color is not similar to the amazon header

We can get these enhancements by adding media queries, picking colors, and removing the sticky position

Original Header 👇

amaon-header

Clone header 👇

amazon-clone-Header

Can I work on this? @Kanika637

Kanika637 commented 1 year ago

Go ahead @ShubhamPatil0723 🚀 And make sure all your code is updated, as we have recently merged a PR solving some parts of the header.

ShubhamPatil0723 commented 1 year ago

Got it

ShubhamPatil0723 commented 1 year ago

Hey @Kanika637, I have fixed the header for devices with more than 500px (desktop & tablets) have a look

https://user-images.githubusercontent.com/92074003/194101342-824db48a-ab96-4986-8784-562eef387198.mp4

But for mobile, we need to change the layout like this

amazon-mobile

Btw amazon uses dynamic serving for responsive design but It will be better if we just stick to responsive design what do you think?

Jai-Solania-29 commented 1 year ago

Hey @ShubhamPatil0723, Go ahead with the mobile view responsiveness🚀 And you may take reference from the mobile view of the amazon site!

ShubhamPatil0723 commented 1 year ago

Hey, I just saw the message that reverted my PR for this issue. Can I know the reason (I'm still a beginner so it would be beneficial for me to learn from mistakes if there where any) @Kanika637

Kanika637 commented 1 year ago

Hey @ShubhamPatil0723, I had to revert the PR as you worked on the old design of the header. If you open it in your local environment then you will see that the header's design has been changed the search bar is smaller in size and other components has some spacing too. So you have to do the responsiveness on that header.

ShubhamPatil0723 commented 1 year ago

Hey @ShubhamPatil0723, I had to revert the PR as you worked on the old design of the header. If you open it in your local environment then you will see that the header's design has been changed the search bar is smaller in size and other components has some spacing too. So you have to do the responsiveness on that header.

No, It was an updated code but the width was dynamic based on the viewport since there are not many elements in that navBar it is taking up entire space but if we add more elements into it then it will scale down. If you want I can add other elements that are present on the original nav bar, should I do that?

ShubhamPatil0723 commented 1 year ago

Like this, Almost same design amaon-header-comparision

First one is original and second one(in blue theme) is clone