Skip to content
Submitted 4 months ago

Responsive Article preview Component

Mahmood•1,450
@MahmoodHashem
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Article preview component
  • HTML
  • CSS
  • JS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

In this challenge, one of the key things I learned was how to leverage JavaScript to accurately detect the size of the user's screen or browser viewport. This involved exploring a few different approaches:

  1. Using the window.innerWidth and window.innerHeight properties:

    • These properties provide the width and height of the browser's viewport, including any scrollbars.

  2. Accessing the screen.width and screen.height properties:

    • These properties return the total width and height of the user's physical display device.
    • This can be helpful for making decisions based on the user's overall screen real estate, beyond just the browser viewport.

  3. Utilizing media queries in conjunction with JavaScript:

    • Combining the power of CSS media queries with dynamic JavaScript checks.
    • This enables me to not only detect the screen size, but also apply appropriate styles and behaviors based on the user's device capabilities.
What specific areas of your project would you like help with?

Any feedback is appreciated

Community feedback

  • AnasIsmai1•240
    @AnasIsmai1Posted 4 months ago

    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
    1
    Mahmood•1,450
    @MahmoodHashemPosted 4 months ago

    @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

    0
    AnasIsmai1•240
    @AnasIsmai1Posted 4 months ago

    @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 :)

    0

Please log in to post a comment

Log in with GitHub

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