Mobile first Article Preview usint html, css and js
Design comparison
Solution retrospective
I feel like i don't entirely know how the social div was done. When the socials div appears on mobile version, the card's height changes like it wasn't done through position absolute but rather display: none;
On desktop size the arrow icon disappears from social div and as well, don't know how that was done so i just cheated it and did it through position absolute, but definitely not proud of that...
Looking on feedback on literally everything that Your eye catches so i can improve, thank You in advance!
edit: I see that my poor solution falls apart really badly when it's not at full size and the media query switches to desktop size at 700px, definitely looking for help with how to fix that.
edit v2: Instead of positioning the arrow that closes the socials div on desktop size with position: absolute, i just made the same button open and close it. Now i have a problem with keeping socials position in the same spot from 700px when it switches to desktop size to 1440px.
Community feedback
- @elaineleungPosted about 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 theopen-icon-close
class that needs to be removed in yourcloseBtn
.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 anh1
before using anh2
; I came across a suggestion online of using a non-visibleh1
in aheader
, and that seemed to fix theh1
accessibility issue for me.Marked as helpful1@BernardanxietyPosted about 3 years ago@elaineleung Ye going back to social div on mobile i still don't know how it's supposed to be done. If the height of the card changes i think the social div isn't just a position: absolute and rather the user div gets a display: none, because position: absolute on social div would just cover it and that's all. On the other hand, on desktop version social div is definitely done with position: absolute and i can't wrap my head around to what should be it's position relative.
About accessibility, i also noticed them but im not too sure what i should do to get rid of them. I look at challenges rather as a part of a whole page, so this would be a section. Should i really put headers and so just for a section? For example, the biggest text would be a header?
About responsiveness, doing the challenges for just these 2 set sizes would definitely be a lot easier, making the social div to follow it's spot when the viewport size changes but is still in desktop size seems hard to me, im not entirely sure what to bind it to honestly. I try to make challenges responsive in order to make the challenges more like a real projects that i could one day be given at work.
Anyway, thank You for your time and advices Elaine, will definitely check Your solution when I have time!
0
Please log in to post a comment
Log in with GitHubJoin our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord