Mobile first Article Preview usint html, css and js

Community feedback

• 

  Elaine•11,360

  @elaineleung

  Posted over 3 years ago

  Hey Bernard, I came across your solution since I also had worked on the same challenge; I just looked at some of the questions you noted down and thought to add a reply here. Here are some comments I have; hopefully they can be useful to you!

  By the way, here's a link to my repo for your reference! Live site here.

  Arrow icon: I did the same thing where I used a pseudo class with position:absolute. On your page, I noticed that in certain cases when I change the screen size while the social section is active, the arrow/triangle becomes visible in desktop view without the callout itself, or that the callout would be visible without the arrow. Thankfully that shouldn't be an issue in the actual use case since people just use a static device in viewing, but in any case, I think you can look at your JS file and fix that. It looks like it could be the open-icon-close class that needs to be removed in your closeBtn.

  Responsiveness: I find that with the Frontend Mentor challenges, most of the time it's best to just keep the widths static if the challenge is a single component and not a webpage. That just means I had the card at a fixed width for each breakpoint; in other words, while the viewport changes, the card's width does not change at the designated views. You may find this approach easier to work with and in that way, you only have to worry about sticking to the two sets of sizes for the mobile and desktop views.

  Social div: I also used display: none in my code. I had come up with various approaches to tackle the profile/social section; I was originally going to do something similar to what you did, but in the end I decided I would only change the styles and use the same arrow for toggling the state instead of having two different arrows. (Side note: Honestly I didn't like the original mobile design where the height changes when the social div is active because the vertical padding is uneven for the main text content. In any case I just used padding to change the heights.)

  Some other comments/suggestions: I noticed that you got a number of accessibility warnings; most of them seem to point to the need for landmarks (i.e., tags like main, header, section, etc.). I'd recommend replacing some of your divs with these landmarks tags. You can have a look at my HTML to see how to do that. One tricky thing is the need to have an h1 before using an h2; I came across a suggestion online of using a non-visible h1 in a header, and that seemed to fix the h1 accessibility issue for me.

  11

  Marked as helpful