Skip to content
OverviewSolutions
3
Comments
12
P
Felipe Fernandes
@felipedfe

All comments

  • P
    Felipe Fernandes•110
    @felipedfe

    Great work! It looks nice in every screen width. The only tiny issue i noticed is that on my screen the bottom gets cut off a bit. I think its because the grid is taller than the viewport. Maybe try using min-height: 100vh instead of height: 100vh on the body so it can grow if needed

    Marked as helpful
  • P
    Felipe Fernandes•110
    @felipedfe

    Hi Anton! Nice work, but i think the design looks a bit broken on mobile, maybe because the .subscribe section is set to height: 100% relative to the main, which has a height of 100vh. So on taller screens, the .subscribe section ends up being shorter than its content

    Marked as helpful
  • P
    Felipe Fernandes•110
    @felipedfe

    Hi Rick! Nice work! Maybe you could try aligning the quote image using a percentage (like right: 10%) so it scales more naturally with the container on different screen sizes

  • Brenda Magg•240
    @brenda-magg
    What are you most proud of, and what would you do differently next time?

    I think the responsive part is not that bad :) but it can be better.

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

    For now i only know the very basic about grid so maybe the challenge can be make with less lines of code.

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

    Still getting better at css, so any feedback about the code and how can i re-making it in the future with less lines of code.

    Testimonials grid section, using Grid & Flexbox

    1
    P
    Felipe Fernandes•110
    @felipedfe

    Hi Brenda! The design looks great, but on desktop it feels a bit too stretched. I tried removing the min-height: 100vh in devtools and it already looks much better

  • P
    Anton Ryabov•240
    @antryabov
    What specific areas of your project would you like help with?

    I understand how to do grid layout. But am I rebuilding correctly via media queries?

    Testimonials grid section

    2
    P
    Felipe Fernandes•110
    @felipedfe

    Hello Anton! Nothing much to say, this is very good! :)

  • P
    Felipe Fernandes•110
    @felipedfe

    Looks great! Maybe just add a max-width to the grid so it's easier to read on big screens

  • Suvam Rai•20
    @Aka-suvam
    What are you most proud of, and what would you do differently next time?

    I'm proud of making my website responsive for all devices using only Reactjs , vanilla CSS and Flexbox. I struggled a lot for making website responsive for all devices. Initially, I enjoyed working on the project, but then I got bored and left it unfinished. After some time, I started liking it again—until boredom hit once more 😅. When I finally completed it and tested the responsiveness across devices, it felt really satisfying. I even shared it with friends for feedback. There were a few bugs, but I fixed them later. The lesson: if you start a project, commit to finishing it—or don't start at all.

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

    The challenges I faced were:

    1. Layout: My initial approach was designing for desktop first. I completed that part, but I realized the same layout wouldn’t work for all devices. I got stuck trying to adapt it for everything from 18000vw screens to mobile and tablet sizes. To solve this, I looked at solutions by creators like catherineisonline, explored a few examples, and then started experimenting. That helped me understand how to manage layout changes better.

    2. Choosing Breakpoints: Finding the right breakpoints for different devices was another challenge. Took help from Claude ,google,stackoverflow understand breakpoints that we have find at screen-size our website break . solved this way .

    3. Responsive Font Size, Width, Height, Padding, Margin, and Positioning: For this, I took help from Claude and ChatGPT, and I learned to use CSS functions like clamp() and calc(),::before,::after pesude element,clip-path effectively .

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

    Please review my code and let me know if it's production-ready and meets 2025 industry standards for making responsive websites. Am I on the right track or way with making responsive websites, or are there areas I should improve?

    Sunny Side agency landing page

    1
    P
    Felipe Fernandes•110
    @felipedfe

    I work as a fullstack developer, and I can confidently say that your code definitely meets the 2025 industry standards for responsive websites :) Nice work!

    Marked as helpful
  • Sarah Hannes•320
    @SarahHannes
    What are you most proud of, and what would you do differently next time?

    Responsive landing page for 3 sizes:

    • Mobile (below Bootstrap's sm)
    • Tablet / md
    • Desktop / xl
    What specific areas of your project would you like help with?
    • I tried to make the nav have background when scrolled (because it is transparent), but couldn't make it work.
    • Is there a (non-hacky) way to make the font-size responsive?
    • There is a white gap on the right of Mobile version which I could not get rid of. 🧐

    Reponsive landing page using Bootstrap 5

    #bootstrap
    1
    P
    Felipe Fernandes•110
    @felipedfe

    "There is a white gap on the right of Mobile version which I could not get rid of"

    Hi Sarah! I took a look at your code, and it seems the testimonial section might be causing the white gap on mobile. When I removed the row d-flex class or added some padding to the <section class="testimonials ..."> element, the gap disappeared. Hope that helps!

    This is the part i changed:

    <section class="testimonials text-center m-md-3 m-lg-4 m-xl-5 p-xl-5"><h3 class="testimonials-title text-body-tertiary mb-md-4 mb-xl-5">CLIENT TESTIMONIALS</h3><div class="row d-flex">
  • P
    Anton Ryabov•240
    @antryabov
    What are you most proud of, and what would you do differently next time?

    I started using the clamp feature and I love it!

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

    I use the clamp function, but how do I choose the correct VAL value? clamp(MIN, VAL, MAX)

    Social links profile

    2
    P
    Felipe Fernandes•110
    @felipedfe

    Same here! I had trouble figuring out the right VAL value too in my last project. This site really helped me -> utopia.fyi/clamp/calculator, it’s good for getting the balance just right. Honestly, I still don’t fully get the magic behind the VAL calculation, but it looked great every time I used it

  • Gnani•20
    @Gnani31
    What are you most proud of, and what would you do differently next time?

    I used media query to make the page responsive.

    Responsive page using media query

    #react
    1
    P
    Felipe Fernandes•110
    @felipedfe

    Hey Gnani! I think your solution looks great! Just a small note, for this project, you probably don’t even need media queries If you set .card to something like max-width: 380px and width: 100%, it would already shrink nicely on smaller screens

  • P
    Felipe Fernandes•110
    @felipedfe

    Hey Daniel! I noticed that in the mobile version, the image changes size with the screen, but the height also gets smaller. Maybe you can try "object-fit: cover" so the image keeps the same height and looks better on small screens. Just an idea, hope it helps!

  • Sepas Haghighi•60
    @sepasHaghighi
    What are you most proud of, and what would you do differently next time?

    I could do it much simpler with Tailwind but I preferred making myself some challenge.

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

    Nothing really. Very simple.

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

    None.

    Frontend Mentor | Blog preview card

    2
    P
    Felipe Fernandes•110
    @felipedfe

    Good job! The design is really close to the original. I’d suggest improving the responsiveness - the card gets cropped when the screen width is set to 375px