Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
25
Comments
16
Manish Mandal
@manishdevelops

All comments

  • Miguel•40
    @notEspagueti
    Submitted over 2 years ago

    QR code challenge

    #react
    3
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    hey! congrats on completion of this project. well instead of 👇

    .container {
         margin: 10vh auto;
    }
    

    you should use 👇 . it is going to align contents center wrt the viewport

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

    hope it adds up to your learning...

  • Madeleine De Guzman•70
    @deguzmanmadeleine22
    Submitted over 2 years ago

    stats-preview-card

    #sass/scss#bootstrap
    3
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    Hey Madeleine congrats on completion of this project... Do these changes for improvement of your project...

    remove element with class .main-img-overlay completely

    .main-image-container {
        background: rgba(170, 92, 219, 0.7);
    }
    .main-img {
     mix-blend-mode: multiply;
    }
    

    Hope it will solve your problem.. keep coding =)

  • Moumita Dhar•70
    @Mou887
    Submitted over 2 years ago

    Responsive navigation using Flexbox

    1
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    congrats on completion of this project.. coming to your query... I have focused on one of your dropdown , another one you can do yourself I feel

    Add this code in the sublist class

    .sublist ul {
        height: 0;
        overflow: hidden;
    }
    

    now on clicking Features . toggle this classList to ul.

    .toggle {
        height: 163px;
        transition: 1s;
    }
    

    now after after application , you can see the animation . this is one way of doing .. and with display : none you can not add perform any animation.. If still you have doubt you can see my solution I have done this project.

    Marked as helpful
  • Curtis•30
    @cl8396
    Submitted over 2 years ago

    Responsive rating component. Uses BEM, data attributes and custom prop

    1
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    Hey congrats on completion of this project, your solution looks good to me.. now coming to your query..

    level heading <h1> is important because it's going to display your main content of the page so you have to use <h1> but if you don't need <h1> then simply you can set to font-size: 0.

    And you don't need to change font-size for every devices you can use clamp() function where it you will be required your min-width , max-width, min-font-size and max-font-size and now some mathematical calcs you have to perform .. Now your font-sizes will adjust itself according to the devices. I am providing you the from where you can learn this clamp() function . https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

    Hope it will help you .

  • Aseem•30
    @AseemsGit
    Submitted over 2 years ago

    QR-Code-Component Project

    2
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    hey Aseem.! happy for you for completion of this project. Let me tell you something so that you can improve your solution.

    Always use <h1> first and adjust the font-size. You have used <h2> and there is no <h1> before it. that is not good practice. Also if there is no requirement of heading for a project then you have to use <h1> and set it to 0 font-size Otherwise it will show you html issue.

    Marked as helpful
  • Rameesha Padmatilaka•220
    @rameesha0126
    Submitted over 2 years ago

    Frontend Mentor - Stats preview card component solution using CSS

    1
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    I feel you have submitted the your another project's solution. Please update and regenerate your solution.

  • sztosiur•110
    @sztosiur
    Submitted over 2 years ago

    QR Code

    2
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    congrats on completion of your very first project. Your solution is quite good. However there is some responsiveness problems in small devices. Add these codes to achieve full responsiveness.

     .wrapper {
        width: min(239px, 100%);
    }
    
    .qr {
      width:100%;
    }
    
    

    and remove max-width from the .text class

    Marked as helpful
  • AKASH VERMA•50
    @akash4102
    Submitted over 2 years ago

    responsive site using css grid and jquery

    #jquery
    2
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    Hello Akash... your solution looks better. But there is a issue. It will be good practice if you enclose rating numbers inside <button> instead of <span> . <button> is used for in-page actions when you don't want to navigate to another page.

    also your thank you portion can be seen by clicking submit button without selecting any rating so, there need a condition too..

    hope it will be help you.. keep coding =)

    Marked as helpful
  • Alan•60
    @Pound-Hash
    Submitted over 2 years ago

    Responsive NFT card

    1
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    hi Alan you can use the below codes to get the overlay ..

    .images {
        position: relative;
    }
    .overlay {
        position: absolute;
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    
    

    hope it will work for you =)

    Marked as helpful
  • P
    dagimchi•170
    @dagimchi
    Submitted over 2 years ago

    3-column-preview-card-component

    2
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    Great question @dagimchi I also had same confusion before but I when I became familiar with clamp() function all the problem solved for me. In this you will need your min and max font size and your min and max screen width .Now your font-size will automatically adjust in your specified width of screen. I will highly recommend you to use clamp() function. follow this URL...

    https://css-tricks.com/linearly-scale-font-size-with-css-clamp-based-on-the-viewport/

  • a86•150
    @alexeightsix
    Submitted over 2 years ago

    11-stats-preview-component

    1
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    hi @alexeightsix congrats on completion of this project... add the below code to color the image

    .right {
        background-color: hsl(277, 64%, 61%);
    }
    
    img {
        mix-blend-mode: multiply;
    }
    
    

    hope it will work for you...

    Marked as helpful
  • Stephanie•50
    @mekoness
    Submitted over 2 years ago

    Responsive Product Card Using Flexbox

    #foundation
    2
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    hi Stephanie, the application of Media Queries will depend on your content, Whenever you feel there is need to add Media Query you can add. But you should design mobile first and after that you can use media queries as required. generally I use maximum 2 break points. max(), min(), clamp(), calc() these are the functions which can minimize the Media Query break points So you should try them.

  • Fiorella Zelaya•50
    @fiozelaya
    Submitted over 2 years ago

    Responsive Advice Generator App using CSS Grid

    1
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    congrats on completion of this project.. Your solution looks great to me .. But there needs some improvement in the code because divider part is troubling in small screens .. You can apply this one line of code for full responsiveness in all devices..

    .divider { width: min(90%, 80%); }

    Hope it will work for you.. keep coding =)

    Marked as helpful
  • Koussay•60
    @KoussayDhifi
    Submitted over 2 years ago

    3-column preview card component

    1
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    hey congrats on completing the project. your solution is looking good . However your solution has some responsiveness problem in the small devices . You have to apply only this one line of code to achieve full responsiveness...

    @media (max-width: 950px) main { width: min(350px, 100%); /* width: 350px; */ }

    hope it will help you.. keep coding :)

    Marked as helpful
  • Ajogu Chinasa•20
    @ajchinasa
    Submitted over 2 years ago

    QR code desktop & mobile view using HTML & CSS.

    2
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    hey @ajchinasa , nice work congrats... on completing this project I would like to suggest you something to improve your code

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

    .main { /* position: relative; / / top: 110px; / width: 220px; display: block; / margin: auto; */ text-align: center; background-color: hsl(0, 0%, 100%); padding-top: 10px; border-radius: 10px; }

    footer { /* display: flex; / / align-items: center; / / justify-content: center; / / position: relative; / / top: 150px; */ font-size: .8rem; }

    hope it adds up to your knowledge..

    Marked as helpful
  • Christian Martins•30
    @christianhsmartins
    Submitted over 2 years ago

    QR Code Component

    #sass/scss
    1
    Manish Mandal•650
    @manishdevelops
    Posted over 2 years ago

    hey @christianhsmartins .. Great work. congratulations on completing this project.. your solution looks great to me . although you can apply the below codes to improve your solution a bit.. just add width of img 100% and also you can add some margin to the card.

    .container .box .qr-code img { /* max-width: 28.8rem; */ border-radius: 10px; width: 100%; } .container .box { margin: 1rem; }

    hope it will work.. happy coding :)

    Marked as helpful
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

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