Skip to content
OverviewSolutions
31
Comments
23
Karishma Garg
@karishma-dev

All comments

  • Taylor•50
    @TaylorC19Submitted over 2 years ago

    This was my first attempt in using flexbox in a project.

    Questions: It seems bootstrap adds a border effect to the button when you press the button. I tries almost every thing I could think of and then went to stack exchange to try and remove that border effect, but I could not seem to remove it. I left the things I attempted to use in my styles.css sheet but commented it out. My question is how do you remove that border effect to a bootstrap button.

    I only used flexbox to space out the buttons on the scale section. Would it be good practice to use flexbox on the scale and thank you divs themselves, or is my way fine?

    Thank you

    Interactive rating component

    1
    Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    Hi, you did a great job on this challenge! To remove the border effect just add border:0 in your .btn class. To remove the border effect from the 5 rating buttons, you can add this in your css file: .btn.active:focus, .btn.show:focus, .btn:active:focus{ border: 0; box-shadow: 0 0; } You can find these fixes by seeing the styling in dev tools. Yeah, I think flexbox is a good and easy way to space out the buttons.

    Hope this helps! :)

    Marked as helpful
    0
  • Ashley Serrano-Ziel•70
    @aszcodingSubmitted over 2 years ago

    Hi everyone! I feel pretty confident about my solution, but if you notice anything I could improve, I'm all ears!

    Thank you! :)

    QR Code Component

    1
    Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    Hey, your solution looks good. Few suggestions:

    1. You haven't closed the link tag for importing the stylesheet, due to which you are having some HTML issues.
    2. Provide alternate text for images so if a person using accessible technologies or due to some reason cannot see the image, they will know what the image is about by reading this text.
    3. Your card is not properly centered. Add display: flex; justify-content: space-between; align-items: center; flex-direction: column; min-height: 100vh; to the body. In this, justify-content will make sure there is some space between your elements and align-items will align the content to the center. Remove min-height: 100vh from your main tag, as it's causing the browser to have a scrollbar.
    4. Add your "Frontend Mentor | QR code component" text in a tag, and add some margin-top to it. Also, add some margin-bottom in your footer so there is some space between the footer and the end of the page. (This will make the design of your page look better).

    Hope this helps! :)

    Marked as helpful
    0
  • Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    Hey, your solution looks good! I noticed something that at some widths your attribution and main content heading are overlapping. To fix this you could set your height: 93vh to height: 100vh in the #general_container element, and add some bottom padding in the body element so your main content and the end of the page would have some space between them.

    Hope this helps! :)

    Marked as helpful
    0
  • Mark Angel Papio•810
    @ExiviuZSubmitted over 2 years ago

    This was a great practice for wrapping flex items at some breakpoints. It was easy but needs a lot of time to do. Any feedbacks are apprecitated, thank you frontendmentors.

    Clipboard Landing Page

    1
    Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    Hey, You have done great work!! I especially liked the way you have made the CSS cross-browser compatible.

    Awesome Work!!

    2
  • Yuliya•230
    @AmbrollaSubmitted over 2 years ago

    I'm always happy to read feedback. However, the only question so far is how does everyone deploy their React Apps? Lol First one that I've deployed using GitHub Pages.

    But this app was very interesting to build, I love quotes and it was interesting to work with images only for mobile version and only for laptops.

    Anyway, this was made with React.js.

    Advice App

    1
    Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    Hi, your solution looks good. Few suggestions:

    1. Your card is not properly aligned to the center of the page and also the button is not properly aligned. You can center the card by adding display: flex; justify-content: center; align-items: center; min-height: 100vh; to the body. In this, justify-content will align the content to the center of the main axis and align-items will align the content to the center of the cross-axis (perpendicular to the main axis). Also, remove the margin from the card and footer for this to properly work, and for the button alignment you can use position absolute; left: 50%; transform: translate(-50%); and add position-relative to the wrapper class. I think you need to learn more about the position and centering the div. Hope this freecodecamp article will help you: here
    2. Your HTML code also contains more than one meta tag for charset.

    For deploying the react app on Github, I mostly follow this article.

    Marked as helpful
    1
  • Adil Rafiq•120
    @Adil-RafiqSubmitted over 2 years ago

    Hello People! So this was my first challenge project from this website. Even though the project was quite easy but as a beginner, I find it some how difficult. The most tiring part of this project was alignment of elements. And there is a part where I have to align clock icon with its text but neither the margin nor the padding option was working. I would be glad if someone can guide me through this.\

    Thank you.

    Responsive NFT card preview.

    3
    Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    Hey, your solution looks good. Few suggestions:

    1. Make your container as the main tag instead of div, this should help you solve your accessibility issues.
    2. And for the alignment of elements issue that you are facing, I used flex in my solution. Add flex in your left and right class, and also the class that contains both of these classes.

    Hope this helps you!

    Marked as helpful
    0
  • maciejfedor•90
    @maciejfedorSubmitted over 2 years ago

    Most difficult part was to correctly set media query - I am not sure if it's done right.

    Also, I used h1 element for each car heading, i want to know if it is okay to use multiple h1 elements on one page.

    Any feedback would be really helpful!

    Responsive 3-column-preview-card-component using CSS Grid

    1
    Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    Hey, your solution looks good! And, h1 tag should be used to declare the main subject, and heading of the page. So it should only be used once per page.

    Great work! All the best!

    Marked as helpful
    1
  • Priyanshi Somani•100
    @Priyanshii677Submitted over 2 years ago

    Hello Everyone!! I am a beginner in Frontend world and I am practicing challenges regularly. I dont't understand why my solution looks different on my computer and different when I submit on the frontend mentor. For example for this solution I correctly defined the background positions for background-images and the solution is looking okay on netlify but when I submitted the background positions are distorted and the heights and widths are not the same. That's why my solution image is also looking very different

    Please help

    Profile card component solution

    1
    Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    Hey, your solution looks good!! To fix the issue you are facing, this could help: In the body, use this background-position:right 50vw bottom 20vh, left 50vw top 50vh; and also remove height: 45px (because why should the main body have a 45px height?) , set min-height: 100vh so the background image could be properly set. And remove the background-position from the media query because the background position I told you would work fine in the mobile version.

    And in your HTML, you have used a lot of div tags, try to use other tags.

    Marked as helpful
    1
  • Priyanshi Somani•100
    @Priyanshii677Submitted over 2 years ago

    Hello Everyone!! I am a beginner in Frontend world and I am practicing challenges regularly. I think I have improved very much. Please take a moment to review my solution and do share your feedback. Happy coding.

    Stats preview card component solution

    2
    Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    Hi, Your solution looks good. A suggestion: To properly center the card you can use something like this: body{ display: flex; justify-content: center; align-items: center; min-height: 100vh;} . In this, justify-content will align the content to the center of the main axis and align-items will align the content to the center of the cross-axis (perpendicular to the main axis).

    Marked as helpful
    1
  • Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    Hi, Your solution looks good.

    To properly center the card you can use something like this: body{ display: flex; justify-content: center; align-items: center; min-height: 100vh;} In this, justify-content will align the content to the center of the main axis and align-items will align the content to the center of the cross-axis (perpendicular to the main axis).

    0
  • Stefano•50
    @SBefaroSubmitted over 2 years ago

    I couldn't apply color styles to the creator name by hovering over the image (such as I did on the title), so I had to customize it individually. If anyone knows how to solve it I would be grateful.

    Any feedback is welcome!

    Plain CSS NFT Component using Flexbox

    1
    Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    Hi, have you tried the general sibling selector? I am pretty sure that could solve the issue you are facing.

    And great work!! :)

    0
  • Karishma Garg•1,010
    @karishma-devPosted over 2 years ago

    Hey, your solution looks good. Add a heading always within the section tag to tell what the section is about.

    0