Skip to content
OverviewSolutions
20
Comments
3
P
aaronrubinstein
@aaronrubinstein

All comments

  • P
    aaronrubinstein•480
    @aaronrubinstein

    Hey Kmigel,

    A trick to making a flex item "stick to the right" is to use margin-left: auto. That causes the item's left margin to expand to take up as much free space as possible, which pushes it all the way to the right.

    Taking a quick look at your code, here are a few suggestions:

    • Wrap your-points and max-points in a new div (making them a single flex item within the summary-item container) and style that div with margin-left: auto
    • You should be able to remove justify-content: center from summary-item (you want the flex items to be justified left, except for the last one that you push to the right)
    • Remove the absolute and relative positioning on all the items within the summary-item container. You shouldn't need that.

    That should address the responsive issues. Hope that helps 👍

    (here's my code for the summary item if you want to take a closer look at the css)

    Aaron

    Marked as helpful
  • P
    aaronrubinstein•480
    @aaronrubinstein

    Nice work Stefano. I just completed this challenge using Svelte as well. Per your comment on adding global styles, if you're using Vite to start a standard Svelte project there should be an app.css file in your src directory. You can add global styles there and they will apply to all your components. Hope that helps!

    Marked as helpful
  • P
    aaronrubinstein•480
    @aaronrubinstein

    Nice work Eileen! I was playing with your live app and noticed the filters aren't quite working as intended. According to the the readme: For each filter added, only listings containing all selected filters should be returned. When I was clicking multiple filters it looked like it was returning listings that included any of the filter terms rather than all of them.

    Here's a snippet from my code (jobListings is the source data and userFilters is an array of the selected filters). I'm doing something very similar to you except using the every() method instead of some(). So probably an easy fix!

    let filteredJobListings = [];
jobListings.forEach(job => {
    let listingFilterTerms = [job.role, job.level, ...job.languages, ...job.tools];
    if (userFilters.every(term => listingFilterTerms.includes(term))) {
        filteredJobListings.push(job);
    }
});
return filteredJobListings;

    Hope that's helpful!

    Aaron

    Marked as helpful