Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
9
Comments
12
Remigiusz Czarnecki
@remmji

All comments

  • Chafiq-ait•140
    @Chafiq-ait
    Submitted over 2 years ago

    ecommerce-product-page-main using CSS Flex

    1
    Remigiusz Czarnecki•380
    @remmji
    Posted over 2 years ago

    Hello 👋

    As you may have noticed, your design is quite different from the one provided by the challenge. Here are some suggestions for improvement:

    💡 Consider using a proper font family to enhance the visual appeal of your design.

    💡 To create a design that's more similar to the challenge, try opening the design image in a browser and setting it up on dev tools at the same resolution as your project.

    💡 Don't forget to make your design responsive! Use relative units such as vw, vh, and % instead of hard coding everything. This will help ensure that your design looks great on different devices and screen sizes. I would strongly suggest to use vw for everything that has to have defined size.

    Hope that will be helpful 💪

    Marked as helpful
  • Lehelac•40
    @Lehelac
    Submitted over 2 years ago

    QR code component

    3
    Remigiusz Czarnecki•380
    @remmji
    Posted over 2 years ago

    Hello 👋

    There are few simple ways to center a div:

    💡Flex:

    .container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100vh;
    }
    

    💡Grid:

    .container {
      display: grid;
      place-items: center;
      height: 100vh;
    }
    

    💡Positioning:

    div {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    

    In regards to your second question. Flexible layouts like Flexbox and CSS Grid can make it easier to create responsive designs that work well on different screen sizes and devices. Using relative units like vw, vh, and % instead of absolute units like px or em can also help ensure that your designs remain responsive.

    Additionally, it's important to keep in mind that HTML is designed to be responsive by default. When building a website or application, it's our responsibility as developers to ensure that our code and styles support and enhance this responsiveness, rather than hindering it. By using the appropriate units and layouts, we can build designs that are flexible and adapt to different screen sizes, rather than being rigid and difficult to use on smaller screens.

    Hope those tips will help you :)

    Marked as helpful
  • thankuxari•110
    @thankuxari
    Submitted over 2 years ago

    Qr code component Beginner

    1
    Remigiusz Czarnecki•380
    @remmji
    Posted over 2 years ago

    Hello there 👋

    In this particular project, using media queries may not be necessary as the card width is only 320px, which can be hard coded (fonts too) and will fit on most mobile screens and match provided by challenge design.

    Other than that it is best practice to use media queries even for small screens. The reason for that is mobile-first approach so the project is optimized for smaller screens which we scale up later on.

    And yeah Google recommends using responsive design with media queries to make sure your website is mobile-friendly, which can improve your search engine rankings and visibility.

    Hope this will be helpful :)

    Marked as helpful
  • Kinga Miśkiewicz•160
    @codingbeary
    Submitted over 2 years ago

    QR code component

    2
    Remigiusz Czarnecki•380
    @remmji
    Posted over 2 years ago

    Hello kiyooteru 👋

    In regards to improving your code, I would suggest a few things:

    💡 Center your card using flex:

    .flex-container { display: flex; justify-content: center; align-items: center; height: 100vh; }

    💡 Hard code the width of the card to match the design, even on mobile as its width is only 320px.

    💡 Use your developer tools to compare your design with the design provided by the challenge on the same resolution.

    I hope those little tips will be helpful :)

    Marked as helpful
  • Fede2797•190
    @Fede2797
    Submitted over 2 years ago

    E-commerce product page - React + Tailwindcss

    #react#tailwind-css
    1
    Remigiusz Czarnecki•380
    @remmji
    Posted over 2 years ago

    Hello there! 👋

    💡In regards to your question about styling screens, I would recommend avoiding hard coding font sizes. Instead, try to use one measurement for everything and stick with it. Personally, I prefer to use vw for everything to get the best results. Additionally, you can use proper media queries around 50em width to adjust the layout as needed. This will help ensure that your website looks good on screens of various sizes.

    💡One thing to note is that your project doesn't currently have a lightbox, which could be a nice addition to mimic an e-commerce site. It's not very hard to implement, and it would add a great deal of functionality to your project.

    💡Another suggestion I have is to position the cart window near the cart icon. To achieve this easily, you can give the parent element a position of relative and the cart window a position of absolute.

    I hope these tips will help you tune up your project ;)

    Marked as helpful
  • Sarah Kwon•60
    @sarahkwon
    Submitted over 2 years ago

    REST Countries Website made with React

    #react
    1
    Remigiusz Czarnecki•380
    @remmji
    Posted over 2 years ago

    Hello there! 👋

    Your project looks really good, and I really like the animation on theme switcher 👌. The only thing I would suggest changing is the "center" div on the detailed page. While the countries are changing, the text appears to jump around a bit. To prevent that i personally used grid on those two text columns 💡.

    Marked as helpful
  • Aashar Mehmood•130
    @Aashar-Mehmood
    Submitted over 2 years ago

    Responsive Countries Info website using React and Tailwind CSS

    #react#react-router#tailwind-css#axios
    1
    Remigiusz Czarnecki•380
    @remmji
    Posted over 2 years ago

    Hello there 👋

    Those are few things you can improve 📈 :

    🌱 Give "cursor: pointer" to all clickable elements, so users know they can interact with them.

    🌱Ensure that all cards follow the same pattern.Its important for maintaining UI standards. Having the 'Details' button in a different location on each card not only looks inconsistent but also deviates from standard design practices.

    🌱Your details page should be displayed in a layout that is consistent with the provided design. I recommend a grid layout for better visual organization and consistency.

    🌱The language buttons on the page are confusing as they resemble buttons, but do not currently have any functionality. It would be better to distinguish them from actual buttons or provide them with a clear purpose.

    I hope this advice will be helpful in improving your project! 🚀!

    Marked as helpful
  • Judah Oyedele•260
    @Judah1604
    Submitted over 2 years ago

    Responsive Ecommerce Product Page

    1
    Remigiusz Czarnecki•380
    @remmji
    Posted over 2 years ago

    Hello there !

    It looks and works pretty well on desktop but its totally not responsive. You may want to add some @media for mobile and tablet so it will look good on any given screen. Remove icon in cart could have "cursor: pointer" as well. Other than that good job. Hope it will motivate you to make this project better.

  • BatuhanGQskt•70
    @BatuhanGQskt
    Submitted over 2 years ago

    HTML-CSS-Responsive Solution(FlexBox used)

    1
    Remigiusz Czarnecki•380
    @remmji
    Posted over 2 years ago

    Hello there,

    What i strongly recommend is different approach to this project. It is kinda designed to solve it with grid instead of flex. Take a look on Kevin Powell solution on YT which may help you improve this project in no time and teach you basics of grid if you dont know them already ;)

    Hope this will be helpful:)

  • Miracle Je•160
    @Miracle-Je
    Submitted over 2 years ago

    E-commerce-product-page

    1
    Remigiusz Czarnecki•380
    @remmji
    Posted over 2 years ago

    Hello there ! What you definitely may want to look at first is your cart logic.

    1. Price should not be changing but be hard coded instead.
    2. Counter should not go below 0.
    3. Add to cart btn should actually add items to cart by amount specified by counter.Instead it add items on every click even if counter is 0 or negative and not update the price in cart correctly.
    4. Remove from cart btn is missing.
    5. You dont want this equality sign in your cart.
    6. Lightbox is missing.
    7. You may want cursor: pointer on those small images to inform user that those elements are clickable.
    8. You may want to add buttons on mobile to swap between images.
    9. Small images have no space to live and they are colapsing on main image.

    Those are things that i noticed on first impression... Sidebar is nice tho ;) Hope this will indicate things to fix and will make your project better!

    Marked as helpful
  • Afnan Malik•180
    @Afnanmk
    Submitted over 2 years ago

    Ecommerce product page using css flexbox and vanilla js

    1
    Remigiusz Czarnecki•380
    @remmji
    Posted over 2 years ago

    Hello there , congratulations on finishing this project :)

    What you may want to fix at first is counter button which has not enough width.It leads to this little vibrations between add to cart and counter btn when counter change its value.

    Also on mobile those underlines in sidebar are not in right place.

    Then you have this warning about unique id's on some of your div elements.

    If you found this not very challenging in terms of js i strongly recommend to expand your project by some other products so you will be able to implement more advanced cart logic. I did it myself and has absolutely no regrets. Much more fun and satisfaction after ;)

    Hope this was somewhat helpful. Gl on your next challenges !

    Marked as helpful
  • Remigiusz Czarnecki•380
    @remmji
    Submitted over 2 years ago

    Home News Page

    1
    Remigiusz Czarnecki•380
    @remmji
    Posted over 2 years ago

    Have no idea why this print screen is showing my project like this while when i open it in browser it have proper margins. Did this project with help of 'CSS Grid Generator'.On mobile view did interactive hamburger to toggle sidebar.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub