Skip to content
Submitted 2 months ago

Product-preview

HoaCTa•110
@HoaCTa
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

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

I am proud of being able to use Sass in this project. I will try to make my code neater next time.

What challenges did you encounter, and how did you overcome them?

I didn't make the page responsive. I have tried to use mobile first approach, but after that I don't know what I should do set rules for bigger screen. I notice that I should use calc() but I don't know if I should write it in mobile part only or for both part. Can those who have experience in implementing responsive pages give me some advice or feedback. Thank you!

What specific areas of your project would you like help with?

Calc(). After mobile screen css has defined, How to make use @media (min-width: 1024px) {}. Do we need to re-write most of parts? or is there better way to do it? Before we write css, do we need to reset the html tag every time? I usually have a main tag and a container div to wrap around all of the content. Is that a good practice or not ? Thanks

Community feedback

  • Huy Phan•2,300
    @huyphan2210Posted 2 months ago

    Hi, @HoaCTa

    • Instead of applying styles directly to the html tag, I recommend applying them to the body tag. Styling the <body> is generally preferred because it directly impacts the visible content, whereas the <html> tag wraps both the <head> and <body>. Since the <body> manages layout and content, it's better suited for styles like padding, margins, and backgrounds. Additionally, many frameworks expect styles on the <body>, offering more flexibility when working with or switching between them.
    • After doing that, you can center your card by adding justify-content: center and align-items: center to the body.
    • Regarding your question about calc(): The decision to use calc() depends on your project requirements and personal experience. You can use it for mobile, desktop, or both. I'd suggest observing what others do and experimenting with it (as I have done and continue to do).
    • For media queries, here’s an example:
    /* Default styles - your mobile styles since you're using mobile first approach */
body {
  background-color: white;
  color: black;
  font-size: 16px;
}

/* Media query for screens wider than 1024px */
@media screen and (min-width: 1024px) {
  body {
    background-color: lightblue;
    font-size: 18px;
  }
}

    When the viewport is 1024px or wider, the background-color changes from white to lightblue, and the font-size changes from 16px to 18px. Since the color: black isn't overridden in the media query, it remains the same. You don’t need to re-write everything nor reset the page or HTML tag to see the CSS changes—just resize your viewport/browser and observe the adjustments.

    Hope this helps!

    0
  • Svitlana Suslenkova•5,360
    @SvitlanaSuslenkovaPosted 2 months ago

    1.In your case container should be main. 2.To center your project add flex or grid directly to body. 3.For desktop you should rewrite css, how much - depends on the project, start from main elements. 4. For this project @media (min-width: 1024px) {} - consider to add smaller value, but it will depend on how your design looks.

    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