@AnasIsmai1
Posted
You've written quite the good code. I just wanted to know why you needed the dimensions of the screen when you could just use the max-width and min-width of the css. Another approach that could be taken is that you could have designed the popup for the desktop using the html code instead of different code altogether with just a few alterations in the position and width on both screens. I like your approach on directly changing the display property using css. Your design sizing seems to be quite accurate as well do you by chance use the figma design as well?
Marked as helpful
@MahmoodHashem
Posted
@AnasIsmai1 Hello there ! Thanks for your feedback.
You brought up a good point about the width implementation.
The popup section was actually the most difficult part of this project. I experimented with different methods to make it work for mobile, and ended up with the approach you see.
Can you provide more details about your suggestion for the popup section
@AnasIsmai1
Posted
@MahmoodHashem Well I used a div to create a popup for both the desktop and mobile version of the webiste. In the mobile version i set its position relative to the content at the bottom of the card and gave it a z index as well as width of 100%. In the desktop version i repositioned the popup as well as adjusted the width of the popup. i adjusted the position by just doubling whatever padding i set and it worked out quite well for me. I hope this helps, if you need any further elaboration please do ask :)
