Skip to content
OverviewSolutions
9
Comments
6
Jenny Eikens
@Jenny-Eikens

All solutions

  • Job listings with filtering built with Next

    #accessibility#next#typescript#tailwind-css
    Jenny Eikens•250
    Submitted about 1 month ago

    There is one thing I wasn't able to figure out: on mobile screens, when adding filters, they get squished once they wrap onto a new line. I worked around this by giving them a min-height, but I feel that there has to be a better solution. I don't understand why this behavior happens, the container can grow in height to accommodate for new lines as I didn't limit its height anywhere. So if anyone has an explanation for this, I'm all ears!

    1 comment

  • IP Address Tracker built with Next

    #tailwind-css#typescript#next
    Jenny Eikens•250
    Submitted 2 months ago

    Currently, when I open the page on a mobile device, the styling below causes the content to be cut off at the bottom because the space taken up by the address bar doesn't get taken into account (so the actual content doesn't span the full height of the viewport). Any ideas on how to fix this would be welcome!

    <main className="flex min-h-screen flex-col justify-end">
    0 comments

  • Todo App built with Next

    #accessibility#tailwind-css#typescript#next
    Jenny Eikens•250
    Submitted 3 months ago

    I can't think of any specific questions right now, but I'm not very experienced at working with Next yet, so if you have any feedback or would like to suggest improvements, I'd love to hear it!

    0 comments

  • Interactive Comment Section built with Next

    #accessibility#next#tailwind-css#typescript#daisy-ui
    Jenny Eikens•250
    Submitted 3 months ago

    I can't think of any specific questions right now, but any and all feedback as to how I can improve my solution is welcome!!

    0 comments

  • E-commerce product page built with React and TailwindCSS

    #accessibility#react#tailwind-css#typescript
    Jenny Eikens•250
    Submitted 4 months ago

    My one main issue is with centering the open shopping cart on mobile screens. I positioned it absolutely, which works for bigger screens, but I just haven't been able to figure out how to center it on the page on small screens. I don't want to use a fixed position because I don't want it to cover the other content when I scroll. Someone please tell me how to solve this issue, as I know my current solution to this isn't a good one.

    Another thing I haven't managed to figure out is how to prevent the nav links from moving up a little to accommodate for the added border at the bottom upon hovering.

    Other than that, I don't have any specific questions right now, but any feedback is welcome!

    1 comment

  • News homepage built with React and TailwindCSS

    #accessibility#react#tailwind-css#typescript
    Jenny Eikens•250
    Submitted 4 months ago

    There's is a horizontal scrollbar at the bottom of my page and I don't understand why that is. If someone can point me to any flaws in my styling that might be causing an overflow, please go ahead!

    Also, this is not technically something I need help with, but I noticed that while the design works on laptops and mobile screens, it doesn't look super great on medium-sized screens. I guess that's just due to the layout though. I considered adding a media query to make the page a one-column layout for medium-sized screens where the articles on the right-hand side would be in a row rather than a column, but I ultimately decided against it.

    2 comments

  • Contact form built with React and TailwindCSS

    #react#tailwind-css#typescript#accessibility
    Jenny Eikens•250
    Submitted 4 months ago

    For some reason, on smaller screens, where the input fields take up the entire width of their grid row, there seems to be a larger margin at the bottom of the first name field than the other input fields. I can't seem to figure out why that is, so if anyone has any ideas, please go ahead.

    1 comment

  • FAQ Accordion built with React and TailwindCSS

    #react#tailwind-css#typescript#accessibility
    Jenny Eikens•250
    Submitted 5 months ago

    As described above, I failed to get the svg for the background image to be the right size. The image currently takes up too much of the viewport height, but if I don't use background-size: contain, the image won't take up the full width of the viewport despite setting it to 100%. I'd be grateful for insights from others and advice on how to solve this.

    1 comment

  • Interactive rating component built with React

    #react
    Jenny Eikens•250
    Submitted 5 months ago

    I think functionality-wise, my app should work just fine. Currently, the only slight issue I'm aware of is that when I open the live site on my cell phone and rotate the screen (so that it's wider than it is high), the top of the rating card gets cut off slightly. So I'm thinking I might need to add a media query to add a margin-top for this scenario. Also, I know I didn't get the colors right. The thing is, the style guide file only lists three colors other than white and orange, which doesn't work out because from the design pictures provided, it looks like there need to be at least four shades of black/blue/dark gray. This is also what color extraction tools that I put the pictures into told me. I would like to know how others approached this (did you stick to the colors provided by the style guide or did you extract the colors from the pictures and use those)?

    1 comment