Skip to content
OverviewSolutions
14
Comments
12
João Gabriel
@joaojgabriel

All comments

  • João Gabriel•340
    @joaojgabrielPosted over 2 years ago

    Instead of changing the opacity of the image, you'd want to add an overlay <div> with the color of the emphasized text (i.e. "insights"), and an opacity lower than 1. You can check out the specifics in my solution.

    0
  • João Gabriel•340
    @joaojgabrielPosted over 2 years ago

    You can change the height property of the <body> and #container to min-height so it stretches with the content to prevent the overflow that is currently happening.

    Marked as helpful
    0
  • Sushant nande•30
    @sushant2313Submitted over 2 years ago

    This was so challenging. For the first time I tried the mobile first and desktop. When I did mobile version it went smoothly. but I was stuck on desktop version for so long. Still couldn't figure some things out as you can see on the site and github. so can anyone please tell me how can I do desktop version for this. I've been on this same challenge for past 2-3 days but today I thought I'll just ask here since I couldn't do it. so tell me somethings I should try to make desktop version? or should I start from desktop first ? any suggestions and criticism are highly appreciated! thank you.

    Stat Preview Card

    3
    João Gabriel•340
    @joaojgabrielPosted over 2 years ago

    I honestly would've gone mad if I tried doing it with grid. Using flex in this case is way more straightforward, and perhaps more appropriate, since it makes sense to think of it from the content out. You won't be free from hassle, though. I had a lot of trouble with some tricky details of margin, padding, width and height to get the image to behave as intended, and I still couldn't make it perfect. Unfortunately, there isn't a single trick I can tell you that will magically solve it, or make you understand. You'll have to go through it on your own; only practice will truly help you learn. What I recommend is this:

    1. Tale a step back, and some rest from this specific problem, until you're recharged and ready to go at it again, with less stress.
    2. Start from scratch, mobile first, but this time make it as simple as possible, and make sure you got the basics covered.
    3. Try making flex work with { flex-direction: column } on mobile and { flex-direction: row-reverse } on desktop.
    4. When you get really stuck, reference my solution to see if there's something there that can help you.

    Good luck, Sushant!

    Marked as helpful
    1
  • João Gabriel•340
    @joaojgabrielPosted over 2 years ago

    It's alright. Read this article. I would attempt to summarize it, but you're better off reading the whole thing and/or keeping it as reference.

    Marked as helpful
    1
  • João Gabriel•340
    @joaojgabrielPosted over 2 years ago

    Do it like this:

    .container {
  /* ... */
  grid-template-areas:
    "header header"
    "subscription features";
  /* ... */
}

.header {
  /* ... */
  grid-area: header;
  /* ... */
}

.subscription {
  /* ... */
  grid-area: subscription;
  /* ... */
}

.features {
  /* ... */
  grid-area: features;
  /* ... */
}

    You can read about it on MDN and see the example I put up for you on codepen.

    0
  • Jack Shelton•210
    @thejacksheltonSubmitted over 2 years ago

    What could I have done to make this shorter?

    I think 180 lines of CSS for this is probably a lot longer than it should be. Would love to see other solutions

    Product Review Card Using Flexbox

    2
    João Gabriel•340
    @joaojgabrielPosted over 2 years ago

    I think it's pretty short, and you shouldn't worry too much about it. One thing that would help is using shorthands, like for margin and border-radius. Other than that, you can keep in mind it was possible to write a more declarative code using Flexbox in the text content. But take those notes as avenues to try out in further challenges/projects, and don't get too hung up on perfectionism. This one's already great. :)

    0
  • Islam Soliman•440
    @simokitkatSubmitted over 2 years ago

    I'm Just open to any feedback and would appreciate it very much as this is my first ever "responsive" design.

    Flexbox

    1
    João Gabriel•340
    @joaojgabrielPosted over 2 years ago

    You did great already! That's the 80% done perfectly, and you can totally leave it at that and go on to the next. If you want to tweak in the details, though, you can consider making the HTML more semantic and, perhaps more fun, you could try to make the text in the right also be a Flexbox with flex-direction: column, then it might introduce some bugs to solve and push you to mess with flex-grow to control the sizing of each individual part. It could also be a Grid, although that would make less sense but provide some practice nonetheless. But again, it's already really good and you'll probably learn more from going to a next challenge.

    Marked as helpful
    0
  • Bismeet singh•190
    @BismeetSinghSubmitted over 2 years ago

    I struggled with the responsiveness on this one, a lot. I think it could be a lot better and would appreciate comments on that. A feq questions I have are :

    1. How do I center the entire thing in the center of the page as given in the design ? 2 ) I think the text padding needs to be fixed on mobile.

    Product preview page using flexbox.

    2
    João Gabriel•340
    @joaojgabrielPosted over 2 years ago

    There are two modern, declarative, and straightforward ways to center direct children elements (in this case it's only one, the card <div> inside <main>), and you technically already did one of them, using Flexbox. The other would be using Grid, like this:

    main {
    display: grid;
    place-items: center;
}

    But as I said, though, you already did it with Flexbox. The only thing messing it up is how images work in CSS. The quick workaround: img { max-width: 100%; }. I can't go in depth on the other notes at the moment, but for now you can take a look at the code for my solution to pick up on some other details.

    0
  • João Gabriel•340
    @joaojgabrielPosted over 2 years ago

    Using background-image is fine, but you should consider using the <img> element for semantics (i.e. because the image is part of the actual content), accessibility, so it can have an alt attribute and arguably use the <picture> element for load time and bandwidth. Anyhow, good job! Don't let these considerations or perfectionism stun you. First get it done, then get it right, then get it optimized. :)

    Marked as helpful
    1
  • João Gabriel•340
    @joaojgabrielPosted over 2 years ago

    You'd probably be better off using Flexbox with flex direction: column for the content on the right to prevent unwanted overflow; that is how I did it. A media query closer to 700px is also warranted, so it doesn't stretch the image further than its intrinsic width (of 687px if I remember correctly). Giving a greater width to the squished desktop version to give the inside elements some room to breathe is probably a good idea as well. Additionally, using the <picture> element in the HTML to load only the necessary image is arguably better.

    Marked as helpful
    0
  • João Gabriel•340
    @joaojgabrielPosted over 2 years ago

    First of all, Milo, your page is looking neat!

    I believe the best way to do that is actually with HTML <picture>. Here's a snippet from my solution for reference:

            <picture>
          <source
            media="(max-width: 687px)"
            srcset="./images/image-product-mobile.jpg"
          />
          <img
            src="./images/image-product-desktop.jpg"
            alt="Glass of perfume lying on a white table with branches of leaves"
          />
        </picture>

    To make it even better, you can specify height and width for the image. Hope it helps, cheers!

    Marked as helpful
    0
  • João Gabriel•340
    @joaojgabrielPosted over 2 years ago

    The desktop image is breaking, and it has to do with how Flexbox works.

    Here's everything you need to solve it, hope you give it a read and think to figure out what is going on:

    0