Skip to content
OverviewSolutions
25
Comments
16

Manish Mandal

@manishdevelopsIndia650 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!

I’m currently learning...

Next.js

Latest solutions

View more solutions

Latest comments

  • Manish Mandal•650
    @manishdevelopsPosted about 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...

    1
  • Manish Mandal•650
    @manishdevelopsPosted about 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 =)

    0
  • Manish Mandal•650
    @manishdevelopsPosted 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
    0
  • Manish Mandal•650
    @manishdevelopsPosted 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 .

    0
  • Manish Mandal•650
    @manishdevelopsPosted 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
    0
  • Manish Mandal•650
    @manishdevelopsPosted over 2 years ago

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

    0
View more comments