Skip to content
OverviewSolutions
25
Comments
16
Manish Mandal
@manishdevelops

All comments

  • Miguel•40
    @notEspaguetiSubmitted almost 2 years ago

    This challenge was done in React whit simple functional components

    QR code challenge

    3
    Manish Mandal•650
    @manishdevelopsPosted almost 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
  • Madeleine De Guzman•70
    @deguzmanmadeleine22Submitted almost 2 years ago

    I encountered the same problem with the nft preview card with overlay not covering the whole image when resizing to other devices. Will try using the suggestion on the other project to fix the issue.

    stats-preview-card

    3
    Manish Mandal•650
    @manishdevelopsPosted almost 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
  • Moumita Dhar•70
    @Mou887Submitted almost 2 years ago

    I wanted to add some animations for the dropdowns but I am not clear about it yet . I have watched tutorials but things are not clear. If anyone could suggest some resource or tutorial it will be of great help.

    Responsive navigation using Flexbox

    1
    Manish Mandal•650
    @manishdevelopsPosted almost 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
  • Curtis•30
    @cl8396Submitted almost 2 years ago

    What heading level selector to use? As it is a standalone component out of the context of a webpage

    Do I place a single h1 on the rating state and not the thank you state? Perhaps a h2 on both headers is suitable?

    I used a media query to implement the responsiveness for smaller screens (mobile). However, my solution seems to be quite clunky and inelegant. I have to go in and change lots of font-sizes for both states. Is there a better way?

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

    1
    Manish Mandal•650
    @manishdevelopsPosted almost 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 almost 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
  • Rameesha Padmatilaka•110
    @rameesha0126Submitted almost 2 years ago

    I have following issues with my code.

    • Adding a purple layer on the image
    • In the mobile view I changed stats section to a column but cannot center it within the card element.
    • Changing the size of text with the screen size. Currently when the screen size is reduced, the text wraps but the size does not change.

    Appreciate if you can go through the code and point any errors you see as well.

    Frontend Mentor - Stats preview card component solution using CSS

    1
    Manish Mandal•650
    @manishdevelopsPosted almost 2 years ago

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

    0
  • sztosiur•110
    @sztosiurSubmitted almost 2 years ago

    This is my first challenge. I've centred everything on the screen with flexbox. I haven't done any semantic in this one, but definetly start doing it with the future projects. Funny thing about this first one is that I thought that I have to recreate QR Code by using CSS and HTML only.

    QR Code

    2
    Manish Mandal•650
    @manishdevelopsPosted almost 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 almost 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
  • Alan•60
    @Pound-HashSubmitted almost 2 years ago

    How can I get the transparent overlay to be the same size as the underlying NFT image?

    Responsive NFT card

    1
    Manish Mandal•650
    @manishdevelopsPosted almost 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 almost 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 almost 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
  • Stephanie•50
    @mekonessSubmitted almost 2 years ago

    I just started working with media queries and I am still struggling with the breakpoint from mobile to desktop layout. Should I add an in-between breakpoint as well for medium sized screens as well?

    Responsive Product Card Using Flexbox

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