Skip to content
OverviewSolutions
12
Comments
3
Christian Foster
@fosteeco

All comments

  • Trey•290
    @willettoSubmitted over 2 years ago

    Update: Thank you for all the comments and links to helpful resources. I was able to fix both issues, although the animation isn't as smooth as I'd like it. I was able to implement a version of Christian's idea within my main element.

    //Original Post I have two areas I need help in:

    1. How can you consistently place the floating box in about the right area?
    2. How can you change an element, like the answers, from display: hidden to display: grid and have it transition in nicely?

    Thanks for your help and feedback!

    FAQ Card

    4
    Christian Foster•270
    @fosteecoPosted over 2 years ago

    The way I'd fix this is by creating a wrapper around the main tag with the same width. .main-wrapper { position: relative; width: min(100% - 8rem, 920px); } This container wraps around the main tag so it's like this:

    <div class="main-wrapper"> <main class="container">...</main> </div>

    This should fix the issue. I created a pull request on your repo if you want to try this solution. Looks good though.

    One thing I think is an issue is the pulldowns extending the size of the container on smaller screens when they are opened. It seems kind of jarring.

    Marked as helpful
    0
  • Christian Foster•270
    @fosteecoPosted over 2 years ago

    The -100vw left property is nice. I usually use a percent but I think this solution makes more sense. Your javascript is also very organized and easy to read. The desktop gallery modal isn't working for me. The breakpoints for the mobile version seem too large as well. It's hard to pull up my console and troubleshoot the desktop version and I'm on a pretty large screen. Looks good for the most part. Keep up the good work!

    Marked as helpful
    2
  • Shane Pinder•190
    @ShanePinderDevSubmitted over 2 years ago

    Based on a comment I received on the Slack channel about building this component without using any media queries, I decided to give it a try. I have amended the CSS file to use clamp() to avoid having to use a media query. Doing it this way used 255 lines of CSS instead of 327 lines doing it without clamp() and using a media query. I am sure I could improve the CSS so if you have any suggestions please let me know.

    Responsive-interactive-rating-component with flexbox and JavaScript

    2
    Christian Foster•270
    @fosteecoPosted over 2 years ago

    Hey Great submission. The mouse over issue has to do with your CSS hover selector.

    changing these css lines : .rating-number:hover, .rating-number:active { color: #fff; background-color: hsl(216, 12%, 54%); }

    To this: .rating-number:hover:not(.rating-selected) { color: #fff; background-color: hsl(216, 12%, 54%); /* background-color: blue; */ }

    Is a solution I came up with. I created a pull request on your repo as well if you'd like to try it out yourself. Keep up the good work!

    Marked as helpful
    0