Skip to content
OverviewSolutions
31
Comments
17

Arshad Ali Kaldane

@IamArshadAliIndia650 points

I’m a mysterious individual who has yet to fill out my bio. One thing’s for certain: I love writing front-end code!

Latest solutions

View more solutions

Latest comments

  • Arshad Ali Kaldane•650
    @IamArshadAli

    Hello There! 👋

    Congratulations on completing this challenge 🎉

    I like your spirit of learning from mistakes. I've nothing harsh but some insightful thoughts that might improve your code. 💡

    1. Center Your Content

    There are many ways to center any content; for now, we'll go with a straightforward grid:

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

    2. Add some space

    Let's give your content some space to breathe using padding:

    .product__content {
    padding: 20px; // tweak the value as per your need
    ...
}

    3. Order Your Image

    I noticed you are using a desktop-first approach and grid, you can order your image like this:

    .product-image {
    order: 2; // as the image is next to the content on desktop mode
    ...
}

@media (max-width: 649px) {
    .product-image{
        order: 1;   // reset the image position when on mobile
    }
}

    4. Add an Overlay

    The challenge has some purple tint on the image which can be achieved by using mix-blend-mode: overlay; and ::before pseudo element.

    .product-image {
    position: relative;   // to make sure the overlay does not overflows
}

.product-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--clr-accent);
  z-index: 1;    // bring the overlay on top of the image
  mix-blend-mode: multiply;  // apply the tint effect
}

    5. Flex your Stats

    Using flex can be more convenient than grid for .stat

    .stat {
    display: flex;
    gap: 15px;   // specify gap between each item
    ...
}

// make your flex items vertical on mobile
@media (max-width: 649px) {
    .stat {
        flex-direction: column;
    }
}

    Above all your solution looks great! ✨

    As I said, you already did an excellent job, but these details will improve it even further. 🚀

    I hope this helps 👍

    Happy Coding 🤓

    Marked as helpful
  • Arshad Ali Kaldane•650
    @IamArshadAli

    Hello There! 👋

    Congratulations on completing this challenge 🎉

    I like your spirit of learning from mistakes. I've nothing harsh but some insightful thoughts that might improve your code. 💡

    1. Center Your Content

    There are many ways to center any content; for now, we'll go with a straightforward grid:

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

    2. Add some space

    Let's give your content some space to breathe using padding:

    .product__content {
    padding: 20px; // tweak the value as per your need
    ...
}

    3. Order Your Image

    I noticed you are using a desktop-first approach and grid, you can order your image like this:

    .product-image {
    order: 2; // as the image is next to the content on desktop mode
    ...
}

@media (max-width: 649px) {
    .product-image{
        order: 1;   // reset the image position when on mobile
    }
}

    4. Add an Overlay

    The challenge has some purple tint on the image which can be achieved by using mix-blend-mode: overlay; and ::before pseudo element.

    .product-image {
    position: relative;   // to make sure the overlay does not overflows
}

.product-image::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--clr-accent);
  z-index: 1;    // bring the overlay on top of the image
  mix-blend-mode: multiply;  // apply the tint effect
}

    5. Flex your Stats

    Using flex can be more convenient than grid for .stat

    .stat {
    display: flex;
    gap: 15px;   // specify gap between each item
    ...
}

// make your flex items vertical on mobile
@media (max-width: 649px) {
    .stat {
        flex-direction: column;
    }
}

    Above all your solution looks great! ✨

    As I said, you already did an excellent job, but these details will improve it even further. 🚀

    I hope this helps 👍

    Happy Coding 🤓

  • Arshad Ali Kaldane•650
    @IamArshadAli

    Hello There! 👋

    Congratulations on completing this challenge 🎉

    I do have some suggestions that might interest you. 💡

    Overflow:

    Your content is overflowing because of two reasons:

    • You've only specified margin-left to your .container > *
    • You are explicitly setting the width of the .listItem & .inputContainer to 100%

    Overflowing problems can be fixed by

    .container > * {
    margin: auto 20px; // set horizontal margin to your .container children
}

.listItem {
    width: --webkit-fill-available; // acquires the available space to prevent overflowing
    ...
}

    As there is a list of features, wrap them in a <ul class="list"><li class="listItem">...</li>...</ul> instead of <span class="listItem">

    One more area I found that can be improved in your code is your submit button:

    Button:

    Instead of explicitly setting width and height and then specifying flex to center the text, you can give padding to the button and align the text to the center like this:

    <button class="button" type="submit">...</button>

.button {
    text-align: center:
    padding: 10px 25px;      
    width: 100%;     // gets the full width from the parent flex container (.inputContainer)
}

    Above all your solution looks great! ✨

    As I said, you already did an excellent job, but these details will improve it even further. 🚀

    I hope this helps 👍

    Happy Coding 🤓

    Marked as helpful
  • Arshad Ali Kaldane•650
    @IamArshadAli

    Hello There! 👋

    Congratulations on completing this challenge 🎉

    You can center your main content using flexbox like this:

    body {
    width: 100vh;
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

    Apart from this, you did an excellent job. ✨

    Happy Coding 🤓

    Marked as helpful
  • Arshad Ali Kaldane•650
    @IamArshadAli

    Hello there! 👋

    Congratulations on completing this challenge🎉

    I also faced the same issue with my projects. Here we know that our react application gets built during deployment to any server(i.e. Vercel, Netlify, Github, etc).

    After a lot of trial & error, some research, and some observation, I found that when we build our react applications, the image path gets hashed e.g. ./image/bg-header.svg gets converted to ./image/bg-header-2f4ag3h.svg (same applies for each image type)

    Tailwind classes (even if you use arbitrary values bg-[url(...)] or customize your theme) do not allow the image paths to get hashed and it remains the same even after the app is built. Hence, our production version doesn't know about the image path that Tailwind provides.

    The solution that I found to deal with this problem is, we need to specify our background image URL from either inline-css or from CSS file like this:

    // method 1
<div className="..." style={{
    backgroundImage: `url("${image}")`, // remember to use quotes when using svg as a background image
}}>...</div>

// method 2
.header-bg {
  background-image: URL(...);  // relative path to your image
}

    Please let me know if you find anything insightful on this issue. 💡

    I hope this helps. 👍

    Happy Coding🤓

    Marked as helpful
  • Arshad Ali Kaldane•650
    @IamArshadAli

    Greetings @PriyankaRC16

    The challenge's screenshot provided to us are captured at a width of 1440px for desktop and 375px for mobile screens. So, it's important to pay special attention to these screen sizes.

    You might have a display with a screen resolution of 1920x1080 or something else, which is why the design looks perfect on your machine and breaks in the screenshot, as the screenshot mechanism looks for our design at 1440px width.

    You might want to consider simulating your screen using the developer tools of your browser. Most of the browsers follow the same path to access the developer tools i.e. options > more tools > developer tools or you can simply use the following key combination Ctrl (or Cmd) + Shift + I.

    Then set the dimensions of the screen to the desired size and you are good to go.

    Hope this helps. Thank you🤓

View more comments