How can we make websites as responsive as Amazon?

I am challenging myself with small project in ReactJs and Tachyons to produce a website as responsive as Amazon (front-end only).

Here is an example of what Amazon can do and I haven't been able to achieve.

Here is Amazon page in full width

Amazon's page in half width. Here we can see that Amazon was responsive and changed the size of the search bar.

Amazon's website in minimum browser size.**Here the website remained at **the same size as when it was in half width.

If you want to try with your web browser, access Amazon

I tried to do the same and I tried a lot of things unsuccessfully, so here is me asking for help.

Currently I am using React-Device-Detect to detect type of devices. Instead of making the website responsive, I do the same job twice in a row (once for the website and once for the mobile with different sizes, etc.) I suppose that the same thing is done by Amazon? (check Amazon on your phone, on your PC, then also check Amazon on your PC with minimum width and see that it differs from your phone)

Now the problem I have in the pictures below:

Website in full page

Website in minimum page. We can observe that everything is resized, the blue bar has decreased in height, the 5 columns are looking terrible

Should I use Bootstrap and is it my only solution? Is Amazon using Bootstrap or do they have their own 'css framework'?

Many solutions about your problem depending on your goals.

1. CSS media-queries

2. A CSS framework (eg. Bootstrap)

3. A React component library (eg. React Material UI)

My first personal recommendation would be the Material UI Grid component. It's really easy to be implemented and it does a good work! Totally recommended for a react beginner developer.

A second option would be CSS media queries along with styled-components. It's a little bit more advanced technique but it results in more clean code.

Hint: You can also check muuri UI library.