My Amazon Clone Just Leveled Up—Mobile Responsiveness Done Right!

Hey everyone! It’s 02:32 PM IST on Tuesday, August 26, 2025, and I’m pumped to drop the latest update on my “Learn in Public” journey! My Amazon homepage clone is now rocking a sticky header, a slick mobile menu, and full responsiveness across devices—yes, mobile finally looks legit! I’ve even hosted it live, so check it out at https://amazonclonehtmlcss.w3spaces.com/ or see the code on my GitHub (https://github.com/Tushar-Kale326/Amazon-clone-html-css.git). Let’s dive into what I’ve built!

Why I’m Building This

I chose Amazon’s homepage to test my HTML and CSS skills, recreating its navbar, search bar, product cards, and footer. I’ve been building it step-by-step, starting with the frontend, and I’m stoked to tackle JavaScript and backend next. Sharing this on Hashnode, LinkedIn, and X keeps me motivated and lets me learn from you all.

What I’ve Built

Here’s the latest:

• Sticky Navbar: Made it stick to the top with position: sticky and added a hamburger menu (☰) for mobile using media queries.

• Navbar Layout: Split into logo, address, search form, and a right section with sign-in, returns, and cart. Added a separate “Sign In” button for mobile.

• Panel: Secondary menu with “All,” “Fresh,” “sell,” and desktop-only items like “MX-Player” and “Today’s Deals.”

• Mobile Location: A new .mobile-location bar for small screens.

• Shopping Section: Eight product cards with CSS Grid, now responsive with media queries for 4, 3, 2, and 1 columns based on screen size.

• Footer: “Back-to-Top” link and multi-column sections like “Get to Know Us.”

Here’s a snippet of my responsive Grid setup:

.shop-section {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    background-color: rgba(132, 157, 174, 0.762);
    width: 100%;
    padding: 10px;
}

@media screen and (max-width: 1024px) {
    .shop-section {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media screen and (max-width: 768px) {
    .shop-section {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media screen and (max-width: 480px) {
    .shop-section {
        grid-template-columns: 1fr;
    }
}

Full code’s on my GitHub: https://github.com/Tushar-Kale326/Amazon-clone-html-css.git. Live site: https://amazonclonehtmlcss.w3spaces.com/.

Where I Struggled

This wasn’t a walk in the park! Here’s what tripped me up:

• Mobile Menu: Getting the hamburger to show and hide the right nav items took forever. I messed with display: none and media queries until it clicked.

• Responsive Grid: The shopping section looked good on desktop, but on mobile, the cards overlapped until I figured out the right breakpoints (480px, 768px, 1024px). Testing on my phone was a headache!

• Navbar Layout: Fitting everything (logo, search, sign-in) on small screens was tricky. I had to reorder elements with order and hide some stuff like the address.

• Hero Section: The height: 90vh looked dope on desktop, but on mobile, it was too tall. Shrinking it to 19vh with media queries saved the day.

What I’ve Learned

This project’s been a rollercoaster, and I’m learning heaps:

• Media Queries are Magic: They fixed my mobile view—stacking cards and resizing the hero section worked like a charm.

• Testing is a Must: I kept breaking things until I tested on real devices, not just my laptop.

• Sticky Headers Rock: position: sticky made the navbar feel pro, but I had to tweak z-index to keep it on top.

What’s Next

I’m not done yet! Here’s my plan:

• This Week: Add tap-friendly hover effects for “See More” links on mobile.

• Next Week: Jump into JavaScript to make the search bar filter products or update the cart live.

• Later: Try backend (maybe Node.js or an API) to add real data.

• Long-Term: Keep improving the live site and blog about it.

Why I’m Learning in Public

Going public is still a bit nerve-wracking but super fun. It keeps me on track, and I love your feedback. I’m sharing on LinkedIn, X, and Hashnode—got tips on JavaScript or mobile polish? Drop a comment! What’s your latest coding hurdle?

Let’s Celebrate

Thanks for riding this wave with me! Check my live site (https://amazonclonehtmlcss.w3spaces.com/) or GitHub (https://github.com/Tushar-Kale326/Amazon-clone-html-css.git) for the code. I’d love to add screenshots—thinking of snapping the desktop view, mobile menu, and responsive cards. What do you think? I’m stoked about this progress and can’t wait to keep building. Let’s connect if you’re coding too! 💻🚀

#WebDevelopment #HTML #CSS #LearnInPublic #AmazonClone #CodingJourney