Skip to content
OverviewSolutions
25
Comments
16
Manish Mandal
@manishdevelops

All 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 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 =)

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

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

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