Skip to content
OverviewSolutions
10
Comments
101

Mark Mitchell

@markup-mitchellGlasgow1,820 points

Frontend dev with fullstack aspirations. Interested in UI/UX and the intersection of design and implementation; agile; accessibility; performance.

Latest solutions

View more solutions

Latest comments

  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    There are native HTML elements - <detail> and <summary> that will get you most of the way there!

    Marked as helpful
    1
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    The overlay on mobile is a bizarre one! I couldn't diagnose it precisely, but I think it's to do with the fact that your overlay's height: 100% inherits an explicit value from... somewhere in its parentage, although I suspect it might ultimately be based on a width value (!). I'd love to know the precise explanation!

    For a quick fix, change min-height to height on .box-2 (although that causes some secondary problems). I'd look for a different approach to implementing the image behaviour TBH.

    Not sure I understand your question about overflow - the card is the container, so you're telling it to hide any contents that overflow the border. Changing the radius of the border's corners then masks content that would otherwise stick out. Does that make sense?

    0
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    I'm impressed by your commitment to browser fallbacks! I should probably think about that a bit more when there's no tooling to add them automagically...

    To me the heading hierarchy seems odd - if the user's age is h2 and location is h3 that suggests to me that location is a subsection of age, which doesn't make sense to me.

    Similarly, the card__profile-stat nodes seem backwards; you could make those divs into sections and reverse the order of the h and p for a better result (IMO):

    <section class="card__profile-stat">
    <h3>Followers</h3>
    <p>80K</p>
</section>

    Re-ordering visually them with flex-direction won't affect their order in the document:

    .card__profile-stat {
    display: flex;
    flex-direction: column-reverse;
}

    Oh, I'd leave the alt tags on your circles blank too, like you have some other images.

    Marked as helpful
    0
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    I don't mean the breakpoints, I mean the width of the card when detail is opened.

    If you look at viewport width 550px with all the FAQs closed, then open one the whole card expands horizontally.

    Anyway, good luck.

    0
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    This looks great - transitioning the height property makes the accordian open so smoothly!

    I notice that below the desktop breakpoint the width of the card increases with a jump when you open the accordian, which is a shame when you've gone to so much trouble with the height.

    0
  • Mark Mitchell•1,820
    @markup-mitchellPosted over 3 years ago

    I've seen lots of people focusing on speed of execution for FEM challenges and I don't think it's a good thing to worry about when you're learning.

    This phrase "from start to finish" is what makes it a difficult question to answer.

    As a professional developer it'll probably be rare to start a brand new project from scratch. You won't have to figure out what font to use, or what base styles, or page-level layout, tooling, naming scheme - maybe even component patterns. So what does "start" mean?

    "Finish" is just as tricky. You have accessibility and HTML issues in your FEM report, so is this challenge finished? Have you tested it across different browsers?

    lol I expect you'll unfollow me after advice like this! 😜

    TL;DR - this solution looks pretty robust and responsive, and I like how it adapts to tablet sizes. I can see you making efforts with the semantic HTML, which is great, and there are some quick fixes you could make in that department. Focus on quality rather than speed - the speed comes with practice.

    0
View more comments