Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Log in with GitHub
OverviewSolutions31Comments23

All comments

  • Taylor• 50

    @TaylorC19

    Submitted

    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

    #jquery#bootstrap

    1

    Karishma Garg• 1,010

    @krrish105

    Posted

    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

    @aszcoding

    Submitted

    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

    @krrish105

    Posted

    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

    @krrish105

    Posted

    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

    @ExiviuZ

    Submitted

    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

    #accessibility

    1

    Karishma Garg• 1,010

    @krrish105

    Posted

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

    Awesome Work!!

    1
  • Yuliya• 230

    @Ambrolla

    Submitted

    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

    #bootstrap#react#webpack

    1

    Karishma Garg• 1,010

    @krrish105

    Posted

    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-Rafiq

    Submitted

    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.

    #foundation

    3

    Karishma Garg• 1,010

    @krrish105

    Posted

    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

    @maciejfedor

    Submitted

    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

    @krrish105

    Posted

    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

    @Priyanshii677

    Submitted

    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

    @krrish105

    Posted

    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

    @Priyanshii677

    Submitted

    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

    @krrish105

    Posted

    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

    @krrish105

    Posted

    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

    @SBefaro

    Submitted

    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

    @krrish105

    Posted

    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

    @krrish105

    Posted

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

    0
  • Karishma Garg• 1,010

    @krrish105

    Posted

    Hi, Your solution looks good.

    Few suggestions:

    1. h1 tag should be used to declare the main subject, and heading of the page. So it should only be used once per page. You have used it in various places in this solution, so try to change it with div, span, or any other tag, and also if using section tag then specify a heading within to tell what the section is about. These will help you solve your HTML issues.

    Regarding the image color, I myself couldn't figure it out, someone on this community will definitely help you out.

    Marked as helpful

    0
  • jake• 140

    @jakewebd

    Submitted

    constructive criticism is appreciated! let me know best practices that i maybe should have used and if i did the media queries right (first time using them). also if you change the <h2> in section 1 to <h1> or the others to different <h> tags then it throws off the whole section a little in terms of sizing relative to the other sections. i dont know why this happens as i styled it with the class "headers" so isnt it supposed to override it and the <h1> shouldnt matter whatever number it is? (you can try yourself in chrome devtools to see what i mean)

    Thanks!

    html and css

    2

    Karishma Garg• 1,010

    @krrish105

    Posted

    Hi, Your solution looks good.

    Few suggestions:

    1. 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).
    2. For the problem you are facing in the headers class, you can see that in dev tools it is showing that all the heading tags have their own margins that's why your layout gets disturbed as you haven't overridden the margin in .headers class.
    3. In the CSS code, you can remove the max-width media query and write its content before the min-width query, and then just make the necessary changes that you want for the desktop version. For example: I can see that you have written margin-left and right auto for .main-container in both the queries, so if you want this class to have these margin for the whole layout then write it without media queries.

    Hope this helps you! Good luck!

    Marked as helpful

    0
  • Karishma Garg• 1,010

    @krrish105

    Posted

    Hi. @herreranicolas, Your solution looks good and responsive.

    Something I noticed: Between 880px to 375px , your card's content starts to get invisible. Try and see if you can work on that.

    Everything else looks great!. Hope this helps you. Good luck! :)

    0
  • Lorenzo Franco• 480

    @Lfrancos

    Submitted

    Hello everyone!! I'm having a problem that I'm not sure how to fix. This also happened to me on a challenged I did before. The problem is that the overlay I'm putting on top of the image is a little bit bigger than the image. Right now it has a width and a height of "100%" and thought that would make the trick but it didn't if any of you has any Ideas on how to fix that I would really appreciate it.

    Thank you very much! : )

    Stats preview card component solution

    #sass/scss

    1

    Karishma Garg• 1,010

    @krrish105

    Posted

    Hi @Lfrancos,

    Did you fix the issue of the size of the overlay on the image? Because I saw that everything works fine.

    Your solution is good and responsive. Congratulations! :)

    0
  • TomekSwitecki• 160

    @TomekSwitecki

    Submitted

    👋🏻Hi everyone!👋🏻

    It's my third attempt at Frontend Mentor Challange.

    I'm extremely proud with the outcome!

    Nevertheless, Im still looking forward to get some feedback on how to improve, especially regarding responsiveness.

    Have a nice day!

    Stats Preview Card Component HTML/CSS

    1

    Karishma Garg• 1,010

    @krrish105

    Posted

    Hi @TomekSwitecki, Your solution looks good and responsive.

    Some things to improve:

    1. I noticed that in smaller widths, your image got shrunk to 0 width. I would suggest setting width to 100% in the media query you used. So that the width of the image will be equal to the width of the screen.

    2. And in the .container class, set margin: 0 auto to center the card properly.

    Hope this helps you. Good luck!. :)

    Marked as helpful

    1
  • iajlsdnt• 70

    @ajlsdnt

    Submitted

    Hello everyone. This is my first ever front end mentor project. I just relearning my html and css. It is really meaningful to me if you have any feedback on my code (maybe the organization, how to keep it neat and efficient). Thank you.

    3 columns preview card (HTML, CSS)

    2

    Karishma Garg• 1,010

    @krrish105

    Posted

    Hi @ameliajulis, Your solution looks good and responsive. :)

    Some things I noticed in your code:

    1. The media query for 768px is not needed, as without this also your solution is looking fine.
    2. In .box class, remove max-height. As is narrow widths like below 200px the button in the card is not visible because the max box height is set to 28.1rem. But without it, the height gets adjusted according to your content.
    3. Add comments in your code, so it will help you and other users to read your code effectively.
    4. Add an alt attribute in your img tag to describe the image used so if the image is not visible due to some reason, this alternate text will help the user know what the image was about. This will also remove the HTML issues that are shown in your report by the frontend mentor.
    5. Add hover effect on buttons.
    6. Add the footer inside the body tag, as all the visible content of a webpage should be inside the body tag.

    Hope this helps you. Good luck!

    0
  • Daniel• 110

    @xBuzAx

    Submitted

    Hi,

    This is my second project made with frontend mentor and I am very satisfied.

    Do you think I could improve something? Write, comment. I will accept any criticism :)

    Stats preview card component

    3

    Karishma Garg• 1,010

    @krrish105

    Posted

    Hi @xBuzAx, Your solution looks good and responsive.

    Things that can be improved:

    1.In desktop layout, instead of specifying an exact width of the card, use width: fit-content. So, in future , you have to add some content then you won't have to change the width of the card.

    2.In desktop layout, in .desc-middle class change your margin-bottom to 2em from 4em. I saw that after changing this, your design looked better.

    1. There are some lines of code in css that were not changing anything in your solution, like:
    • In section : paddinng: 0 2em, .desc: align-items: center, etc. Try to see these lines and remove them, so there is no extra code that is not modifying your solution in any way.

    Hope this helps you. Good luck!

    Marked as helpful

    1
  • Karishma Garg• 1,010

    @krrish105

    Posted

    Hi @FarzeenKist, Your solution looks good and responsive.

    Things you can improve in your code:

    1. Instead of adding margin: 0 to different elements , you can add this to the universal selector. It will be applied to all the elements you are using.

    2.I noticed that there is no use of max-width: 100% in your img element.

    Hope this helps you. Good luck!

    1
  • Karishma Garg• 1,010

    @krrish105

    Posted

    Hi @Bragdale, Your solution looks good and responsive. In your mobile layout, your attribution is interfering with the first item button. You just need to add z-index: -1 to your attribution in mobile layout. This will cause your attribution to be behind the first item button.

    And one more thing, don't use both internal and external css in your HTML file. Add the attribution code that you have in internal css file to your external css and delete it from your html file.

    Hope this helps you solve the problem you are facing. :)

    Marked as helpful

    1
  • Karishma Garg• 1,010

    @krrish105

    Posted

    Hi @Gabrielbe17, For the hamburger part, try to read about event listeners in JavaScript and Html DOM.

    Here is an article that will help you create the hamburger menu: hamburger menu.

    Your website looks good 👍.

    0
  • Karishma Garg• 1,010

    @krrish105

    Posted

    Hi @leorichy, This looks perfect, it's responsive and the hover effect is also great. Congratulations! <3

    0