Skip to content
  • Unlock Pro
  • Log in with GitHub
Solution
Submitted over 1 year ago

Product Landing page using media queries

SuperJulia2024•220
@SuperJulia2024
A solution to the Product preview card component challenge
View live sitePreview (opens in new tab)View codeCode (opens in new tab)

Solution retrospective


Which is the best approach to follow to set the margins between paragraphs and titles ?

  1. Set a border-bottom to every element ?; or
  2. Set a border-top and a border-bottom to the central element and then set the rest of margins for the other elements ?

Which properties should be set in "rem" and which ones in "px" ? Do we only use "rem" for properties related to html font-size ? What about width/height for an img, borders, margin, etc.

Thanks !

Code
Select a file

Please log in to post a comment

Log in with GitHub

Community feedback

  • Yari Morcus•500
    @YariMorcus
    Posted over 1 year ago

    Hi SuperJulia2024,

    First of all, I think you did a great job coming up with a solution for this challenge. It looks exactly like the design and is also responsive.

    Here is my answer of your question about margin-tops and bottoms. I currently do not have time to also answer your second question about pixels and (r)em. I will come back to this solution to answer this question as well as soon as I got more time (and if I did not forget it 😳).

    1. I read somewhere (and I kind of share the same opinion) that you should always apply a margin bottom to elements. This has to do with a concept called 'margin collapsing'. If you start mixing margin tops and bottoms of elements and you do not understand this concept, then it can become quite hard to calculate the real distance between elements. This is because those margin tops and bottoms start to collide with each other. For example: if you apply a positive margin-bottom of 10px to element a, and a positive margin-top of 20px to element b, the real distance between element a and b will be 20px (not 10). This is ofcourse a simple example but in a real big project this can become quite complex (and frustrating if people start mixing them). I personally only use a margin-right and left on a complete container to push it away from other surrounding containers (a container that is completely independent from others (Containers like these should be marked with <article> (here you got a free tip haha))). Concerning your solution: I personally would have placed the margin-bottom: 1.8rem of .current_price on the container with .price.

    Other feedback I would like to give you.

    Feedback

    1. Create a hover state for your 'Add to Cart' button with enough contrast between the enabled state and hover state. This gives the user a distinct indication that they are hovering over an interactive element. You can achieve this with an overlay with a lower opacity than your current background color (to make sure people are not distracted).

    I hope you can do something with this, but if you still have questions, let me know. Don't see it as something you need to do, but rather something for later (you are always free to correct your solution).

    If I made a mistake somewhere in this post, feel free to correct me and keep building awesome things :D.

    Marked as helpful
  • Nathan Ray•360
    @NathanRayM
    Posted over 1 year ago

    Hello,

    Great job! I have a suggestion that you may find helpful. Instead of using margin to space the paragraphs, you can set the div container to either display flex or grid, use column, and then use gap to create even spacing between them. I hope this helps.

    Example:

    div{
      display: flex;
      flex-direction: column;
      gap: 20px;
    }
    
    Marked as helpful

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
Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

How does the accessibility report work?

When a solution is submitted, we use axe-core to run an automated audit of your code.

This picks out common accessibility issues like not using semantic HTML and not having proper heading hierarchies, among others.

This automated audit is fairly surface level, so we encourage to you review the project and code in more detail with accessibility best practices in mind.

How does the CSS report work?

When a solution is submitted, we use stylelint to run an automated check on the CSS code.

We've added some of our own linting rules based on recommended best practices. These rules are prefixed with frontend-mentor/ which you'll see at the top of each issue in the report.

The report will audit 1st-party linked stylesheets, and styles within <style> tags.

How does the HTML validation report work?

When a solution is submitted, we use html-validate to run an automated check on the HTML code.

The report picks out common HTML issues such as not using headings within section elements and incorrect nesting of elements, among others.

Note that the report can pick up “invalid” attributes, which some frameworks automatically add to the HTML. These attributes are crucial for how the frameworks function, although they’re technically not valid HTML. As such, some projects can show up with many HTML validation errors, which are benign and are a necessary part of the framework.

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub