Skip to content
  • Unlock Pro
  • Log in with GitHub
Profile
OverviewSolutions
24
Comments
14
DanielK
@DanK1368

All comments

  • blameleo•20
    @blameleo
    Submitted about 3 years ago

    css flexbox,media queries/javascript

    2
    DanielK•440
    @DanK1368
    Posted about 3 years ago

    Hello,

    You can use another div as the parent element of your current navbar, and give it a position absolute. Give it a width and height of 100% to cover the whole viewport.

  • Byron•2,290
    @byronbyron
    Submitted about 3 years ago

    Intro section with dropdown navigation using Tailwind and Alpine.js

    #tailwind-css
    2
    DanielK•440
    @DanK1368
    Posted about 3 years ago

    Hi Byron, nice work. I uploaded the challenge the other day and for some reason when viewing the site on my cellphone I can scroll beyond the content. I have overflow set to hidden though. The same occurs when viewing the site in the browser using the responsive window and setting the touch simulation to enabled. When its disabled though, it works as intended. Hope you can have a look :) I used react and styled components for mine

  • DanielK•440
    @DanK1368
    Submitted about 3 years ago

    Responsive Dropdown Navigation using REACT & Styled Components

    #react#styled-components
    3
    DanielK•440
    @DanK1368
    Posted about 3 years ago

    I also just realized, that when viewing the site on mobile you can scroll beyond the content ( right and down ) . I'm not sure why that is..

  • Leonel Montiel•40
    @leonelmontiel
    Submitted over 3 years ago

    Order Summary Component Main

    #bootstrap
    2
    DanielK•440
    @DanK1368
    Posted over 3 years ago

    Hi Leonel,

    You have to apply the top borders to your illustration image. border-radius: 10px 10px 0px 0px; Then it should work.

    Also to get rid of the Accessibility issues you have to wrap your content in a <main> tag. The order summary text should be an <h1> Tag.

    Hope this helps a little.

    Happy Coding

    Marked as helpful
  • folake•230
    @thefolake
    Submitted over 3 years ago

    Single Price Grid Component

    1
    DanielK•440
    @DanK1368
    Posted over 3 years ago

    Nice one, it is also responsive.

    I would suggest adding a box shadow on the sign up button to make it stand out more. You should also add the hover state for that, to make it more interactive.

  • Luis•20
    @lnaranjoc
    Submitted over 3 years ago

    stats-preview-card-component

    3
    DanielK•440
    @DanK1368
    Posted over 3 years ago

    As stated above already, you need to make use of the flex-box properties such as justify-content, and align-items in combination with display: flex. By doing so, there's no need to to give all your different headings margins. I suggest you watch this recent video from Traversy Media on flexbox, you'll be more comfortable on using it afterwards. Flexbox video

  • Lorenzo Franco•480
    @Lfrancos
    Submitted over 3 years ago

    Advice generator app solution

    #sass/scss
    1
    DanielK•440
    @DanK1368
    Posted over 3 years ago

    Hi Lorenzo

    Great work on this challenge. I've completed this one the other day too. Not sure if you tried to open it with firefox, but you will notice that it isn't working. It works just fine in chrome though. I've had a similar issue, and it turns out that the requests made to get an advice are being cached in firefox. So to get around that you add the following:

    const data = await fetch(' https://api.adviceslip.com/advice', { cache: 'no-cache' } , );

    It should then also work in firefox. :)

    Marked as helpful
  • DanielK•440
    @DanK1368
    Submitted over 3 years ago

    Advice Generator App using HTML5/SASS/vanillaJS

    #sass/scss
    1
    DanielK•440
    @DanK1368
    Posted over 3 years ago

    So thanks to the Frontend Mentor community I was able to finally fix the problem in firefox. The site should be working as intended now :)

  • LiBee•370
    @Li-Bee
    Submitted over 3 years ago

    Responsive pod landing page using Flexbox, CSS Grid

    2
    DanielK•440
    @DanK1368
    Posted over 3 years ago

    I just uploaded the same challenge this morning. It was fun, and i think you did a good job.

    To get rid of the issues in the report you should update the alt attributes for the images in case they cannot be displayed.

    I also noticed that when viewing your page on my mobile phone, the image of the host is almost gone. I would adjust the opacity of the overlaying color for the image to come out more.

    I usually start around 960px to above 1000px to do the layout for the laptop. However, I think its generally better to adjust the layout as soon as there is enough space for the content to fit for the desktop version. Once the layout starts to look awkward as you grow the window you should add changes, i think it will make the overall transition look nicer too. :)

    Marked as helpful
  • Jesus Rebeitte•110
    @Rebeitte
    Submitted over 3 years ago

    3 columns challenger solution

    #bem
    2
    DanielK•440
    @DanK1368
    Posted over 3 years ago

    Hey..i usually apply a font size of 62.5% for the whole project. It's just a bit easier to calculate as 1rem will equal to 10px. Without setting this percentage it will be 1rem=16px.

    You generally want to avoid using px for setting widths and heights, as it will not be responsive to the size of the screen. Unless you really want it to be fixed then you can use px. It depends on what you want to achieve. :)

  • Ngoc Tran•40
    @tranngocteam79
    Submitted over 3 years ago

    HTML CSS

    2
    DanielK•440
    @DanK1368
    Posted over 3 years ago

    It looks good :)

    I have one suggestion. I would add a border-radius to the hover effect of the image, the same one that you applied to the image itself. It will look nicer.

    Marked as helpful
  • Mayank Agarwal•70
    @mayank-2323
    Submitted over 3 years ago

    Stats preview card built using CSS Flexbox - Mac Learns

    2
    DanielK•440
    @DanK1368
    Posted over 3 years ago

    Hey, good job on creating the site.

    In order to get rid of HTML issue, you need to apply proper HTML5 semantics. Wrap your entire content in a main tag. You can also then apply the following to center everything:

    main { display: grid; place-content: center; }

    You also need to use an <H1> tag. Wrap your text in your .heading class in an <h1> tag, and it will solve the other issue. I also noticed that you do not wrap your other text within your div containers in any <p> tag. You should do that as well. It will assist the screen readers.

    Hope this helps :)

  • sdnitrogen•30
    @sdnitrogen
    Submitted over 3 years ago

    Testimonials section using CSS Grid : challenge#2

    2
    DanielK•440
    @DanK1368
    Posted over 3 years ago

    Nice one. It's good to add a tablet version so the change from mobile to desktop is not too drastic. Good job :)

  • DanielK•440
    @DanK1368
    Submitted over 3 years ago

    Responsive Testimonial Grid Section with HTML & SASS

    #sass/scss
    1
    DanielK•440
    @DanK1368
    Posted over 3 years ago

    I expected the HTML issue with the missing h1 tag to appear. What is the workaround in this case? Since all of the headings within the articles are the same, and there really isnt one main one for this page.

    I also only noticed now, that there is a box-shadow around the components. Will be adding this one.

Frontend Mentor logo

Stay up to datewith new challenges, featured solutions, selected articles, and our latest news

Frontend Mentor

  • Unlock Pro
  • Contact us
  • FAQs
  • Become a partner

Explore

  • Learning paths
  • Challenges
  • Solutions
  • Articles

Community

  • Discord
  • Guidelines

For companies

  • Hire developers
  • Train developers
© Frontend Mentor 2019 - 2025
  • Terms
  • Cookie Policy
  • Privacy Policy
  • License

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub

Oops! 😬

You need to be logged in before you can do that.

Log in with GitHub