All solutions

Hello community,

I hope you're all doing well. While working on this project, I've come across a couple of challenges that I'd appreciate some help with.

• Icon Slider Alignment:

In my App.jsx, I've been struggling with aligning the icon-slider in the center of the range-slider-thumb. The related code section is currently commented out in my App.jsx, as shown below:

<div className="relative w-full mb-12 flex justify-center md:order-3 mt-10">
  <input
    type="range"
    min="0"
    max="100"
    step="25"
    value={sliderValue}
    onChange={(e) => setSliderValue(e.target.value)}
    className="range-slider"
    style={{ background: sliderGradient }}
  />

  {/* <img
    src={iconSlider}
    alt="icon-slider"
    className="absolute -top-0.5 -translate-x-1/2"
    style={{
      left: `${sliderValue}%`,
      transform: `translate(${sliderValue === 0 ? '50%' :
        sliderValue === 25 ? '0%' :
        sliderValue === 50 ? '-50%' :
        sliderValue === 75 ? '-100%' :
        sliderValue === 100 ? '-150%' :
        '0'
      })`,
    }}
  /> */}
</div>

I've tried a few techniques, but I couldn't achieve the desired alignment. If anyone has insights or suggestions on how to achieve this, I'd be really grateful.

• Responsive Design and Chrome Dev Tools:

While I've implemented responsive design in my site, I've noticed an issue when using Chrome Dev Tools to simulate specific devices like the iPhone XR and Samsung Galaxy.

The content gets clipped, and scrolling doesn't work as expected. I've experimented with the overflow property, but haven't found a solution yet. I'm wondering what I did wrong. I would appreciate it if anyone can help me out with this.

Any help or guidance you can provide on these two challenges would be greatly appreciated. Thank you in advance for your assistance!

Best regards, Koya

Got a good practice with components in react and got very comfortable with tailwind css

• I'm very excited that I built this project because it helped strengthen my layout skills and I learned a lot. I watched a tutorial on CSS Grid and practiced my newly learned skill with this project. It was a bit difficult at first but I eventually figured it out.

• I also came across the implementation of a responsive navbar for the first time. After watching some tutorials and reading various articles, I finally created my first hamburger menu. I'm very proud of myself.

• I also came across dom manipulation in React with the useRef hook. Although I need to practice using it a bit more, it was nice to be introduced to it. I also came across z-index and overflow-x in CSS for the very first time. I'm feeling like a much better developer.

• The only issue I battled was I wanted to make the design and my implementation picture perfect but I was not able to get the content in the aside of the article (New) to fill up and match just like the design given. Any suggestion about that would be appreciated.

• I would love any other feedback about my code and best practices. I'm always looking to improve and any input whatsoever will be gratefully appreciated.

So I attempted this project right after learning about responsive web design. I followed the advice and best practice of styling mobile first. It was pretty easy and I got through it fast. Then came adjusting the styles for the desktop fit. This was going well until I came about trying to fit the image. As a result of that, I have a few questions below:

• First of all, For the mobile version, the card container height was responsive but for the desktop view , I gave it a fixed height so that I can also give the image the exact same fixed height. Is that ok ? Or is there another route I could have taken that doesn't involve me giving the card a fixed height and the image will still match with the height responsiveness of the card ? (I already gave the image a width of 50%). This part took me quite some time because I was thinking there was a way to make the height of the image grow with the card when the screen size is reducing so if you have an answer to this question it would be much appreciated

• Second of all , the breakpoint for my media query is at 900px because that is when my desktop layout was practically breaking. I read somewhere that media query breakpoints are layout specific and not screen specific. I just want to confirm whether that breakpoint is actually ok ?

@media (min-width: 900px) {

    body {
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .card {
        width: 80%;
        flex-direction: row;
        align-items: flex-start;
        justify-content: space-between;
        margin: 0;

        height: 480px;
    }

    .main {
        width: 38%;
        margin-left: 2.5em;
        text-align: left;
    }

    .main-heading {
        margin-top: 1.6em;
        margin-bottom: 1.2em;
    }

    .main-paragraph {
        line-height: 30px;
        margin-bottom: 5.5em;

        font-size: 1rem;
    }

    .stats {
        display: flex;
        flex-direction: row;
        justify-content: space-between;
    }

    .stats-paragraph {
        font-size: 0.7rem;
    }

    img {

        min-width: 50%;
        border-radius: 0 10px 10px 0;
        width: 40%;
        height: 480px;
    }

• I would like to know if there's another approach to adding image overlay ? Is the approach I used ok ?

img {
      filter: opacity(0.3) drop-shadow(0 0 var(--image-background-color));
}

• Would using grid here have been much easier ?

• If there's any suggestion you have for the code or structure I'm more than happy to hear feedback. If you know of a better approach, please do kindly share, it'll help me out a lot

THANK YOU

Hey guys, so I just completed this challenge and I would like some feedback in the areas below:

• I used pure CSS on this project and I would like to know whether Sass is really necessary to learn ?

• I'm very comfortable with flexbox but I'm not quite confident using grid yet. I don't think I could have used it for this layout though but that's something I definitely want to get better at. Is there a way to distinguish when to use flexbox or grid ? What's the best scenario to use either ?

• So I made a body class to serve as my body because I don't really like dealing with the conventional body tag, except to remove the default padding and margin. In order to center the content in the middle I had to give the body class of 100vh. Is that really necessary ? Must height always be defined to center a div both horizontally and vertically in a page ? See code snippet below:

.body {
    height: 100vh;
    background-color: hsl(212, 45%, 89%);
    display: flex;
    justify-content: center;
    align-items: center;
}

Any feedback will be appreciated. Thank you