Submitted over 1 year ago

Responsible Product Shopping Page

Suleman Tasawar• 380

@Suleman-Tasawar

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

Hey there friends This is the solution to the ecommerce product landing page.

I couldnt fully create this project.There are a few things that i couldnt figure out

First when the light box is opened the background should be dim.I tried it but it didnt work well like when i apply the Background and the opacity the whole page including the lightbox gets those properties

Secondly the nav menues its hiding behind the lightbox image in mobile display.

Guide me how did you tackle this problem.Eagerly waiting for responce

Community feedback

S MD suleman• 3,530

@sulemaan7070

Posted over 1 year ago

hey Suleman Tasawar😄, congratulations on completing the challenge.. as for your querires.. I have played around with the site...

1.Firstly the nav was not behind.. there is some inheritance issue.. height:100% is going to inherit the height of the parent... so, this code seems working try it..

.nav {
    z-index: 1;
    position: fixed;
    padding-top: 20px;
    left: 0%;
    top: 0;
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 200px;
    height: 120vh;
    background: #fafafa;
}

2.and as for the lightbox query instead of playing the opacity of the website you can add an overlay which covers the whole screen and is having the effect you are looking for..

Hope that helps, happy coding🔥👍🏻💯 and feel free to ask for any help

Marked as helpful

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