Submitted about 2 years ago

E-commerce product page

Yang• 220

@yangxdev

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

E-commerce product page

HTML
CSS
JS

3intermediate

View challenge

Design comparison

SolutionDesign

Solution retrospective

[ Problem solved ] -> [ Hi, I'm not done yet with the challenge because I got myself in a very troubling situation which I just can't find a solution for it: The cart-card always appears behind the h1 title of the sneakers or behind the horizontal line (hr) below the top-banner; I tried "skipping" the hr issue by just moving the cart-card away from the hr line, but still no idea how to solve the former issue. Searching on google/stackoverflow gives me just a bunch of threads (like "inner div before outer div"), I tried applying some of their solutions but still no progress.

Is the HTML code structure fine? Can a solution be achieved by not changing it in its entirety, i.e. by working only on CSS (or JS)? Thanks a lot! I hope to get over this annoying problem soon. I'll be working on the other parts of the website in the meanwhile. ]

Community feedback

Furkan Rehber• 230

@rehberbey

Posted about 2 years ago

Hey man, nice work, but there are a few glaring things.

You need to add a background to div.cart-card, it's currently transparent.
The listener in <div class="btn top-btn top-cart" onclick="cart()">...</div> is not working.
You should remove the following attributes from div.attribution. Because they overlap.
```
    position: absolute;
    bottom: 15px;
```
There is a horizontal scroll bar on the home page of the site. It doesn't look nice.
I haven't checked the code but it seems to be developed for desktop browsers only.

I like your work, I hope you will consider what I have said. 🎆

Marked as helpful

Yang• 220

@yangxdev

Posted about 2 years ago

@rehberbey Hi, thanks for your helpful reply!

Looks like I totally forgot about the div.cart-card's missing background, that's why any solution didn't work, with it being transparent.
Being a work in progress, I've yet to code the cart() function, I was planning to start with it after fixing this issue.
I'll take the div.attribution notice in mind!
I noticed in previous projects that the scroll bar seems to appear only on Windows devices, I'm working on a Macbook's chrome browser (safari is the same) and the scroll bars are not there, I may need a heads-up for this thing too haha.
Yeah, I started the website development for desktop browsers for now, planning to make the mobile side later when I'm done with the desktop design.

Thanks again!

David• 8,000

@DavidMorgade

Posted about 2 years ago

Hey man, sometimes this things just happens and we need a cold shower to find where is the damn bug I feel you.

The problem here is that you are not using any background color in your cart-card, you are only using box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px; (and thats why it looks like the h1 is on top of the cart), set the background color of your cart-card to white and it will fix the problem

Tell me if it works, good luck!

Marked as helpful

Yang• 220

@yangxdev

Posted about 2 years ago

@DavidMorgade Hello, thanks for the reply! I can't believe I missed the fact I didnt' add any background to start with! That's why nothing worked when I tried to fix the problem.

Thanks again!

Please log in to post a comment

Join our Discord community

Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!

Join our Discord