Submitted over 3 years ago

APC: Mobile first, vanilla CSS & JS.

Robert McGovern• 1,095

@tarasis

Preview site View code

This is a solution for...

Article preview component

HTML
CSS
JS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I have 3 questions:

Desktop version: How do I fake click the tooltip away when I cross over into the mobile version?
Desktop version: I had to not use overflow: hidden in .artcilePreview because it would crop the tooltip/callout, which meant I had to apply a border-radius in .previewImage. Was there a way to have used overflow: hidden in .artcilePreview but had the callout go outside the bounds of the component?
Is there a way to have the value used for the media query and the javascript as the break point be read from file? I dislike hard coding it in both because then you would have to remember to edit both

Things I know I could do better:

Comments
less PX, more rem/em.
sectioning CSS better

--- Edit

On the original submission I saw there was an error about using a div inside the button. This lead me to fixing a question I had previously asked. (why on my desktop solution the share button was jumping when the tooltip was visible)

Community feedback

Emmilie Estabillo• 5,540

@emestabillo

Posted over 3 years ago

Hi Robert, it's me again 😄. I'm here for question #3. I think for your popup div, you can keep your code DRY by using absolute positioning from the start. All you have to do is tweak width/height and edges(top, right, etc.) per breakpoint, instead of declaring them all in your js. To keep it hidden in its initial state, you can probably use z-index or opacity (just my ideas but of course, need to test these). The js can then be responsible for only the hide and show properties with an event listener. I hope this makes sense :-)

I know you're really into details lol so here are some more minor points:

When you open the popup div on the breakpoint, you get a horizontal scroll
The attribution may be causing a slight vertical scroll
It would be nice to add a tags or hover states to the social media icons

Hope this helps at all! Otherwise, excellent job with replicating the design as always 👍🏼

PS - What is a fake click? :-)

Robert McGovern• 1,095

@tarasis

Posted over 3 years ago

@emestabillo hello you 🖖 that is a neat idea, hadn’t even considered that possibility. Thank you.

Will have to give that a go. I agree DRY is better, it seemed like a code smell to have the size in both the CSS & JS, and the duplicated div for the share stuff in the HTML, which is why it was bugging me.

I know you're really into details lol

grin ‪¯\_(ツ)_/¯‬

Thank you for the minor points! Will check those out (I only put the attribution back in at the end). Agreed I should have done the a Refs. I considered it then promptly forgot 🤦‍♂️. Hover effect is a good idea to indicate your over them it.

Fake click is me not remembering the word “programmatic” at the time. I meant a click I could trigger using code. If I kept my solution as is, I guess I could use this event https://developer.mozilla.org/en-US/docs/Web/API/MediaQueryList/onchange to call the JS toggle function when the transition occurs (I failed to find this yesterday 🤦‍♂️)

But the “correct” answer for this solution is to simplify the code, and have it transition between the two tool tips as you resize.

Hope this helps at all!

It does, thank you! If nothing else it helps me think it through.

Maxwell Ihiaso• 135

@Maxwell-ihiaso

Posted over 3 years ago

Hello Robert McGovern,

you really took the time to deliver this version of your challenge. I like that it appears like a copy of the original challenge. Good Job! I am super impressed.

About your question (2):

It's not possible to have overflow: hidden as a property of an ancestor and have its descendant seen in any of the outside areas.

Well using CSS alone may not achieve this even if the z-index is played with. One way I may tackle this is to have the tooltip positioned outside of the ancestor with property overflow:hidden, then style it to fit. However, adjusting the viewport may create issues with positioning. This is where you would have to use Javascript to assist with responsive/dynamic positioning while targetting share button

Robert McGovern• 1,095

@tarasis

Posted over 3 years ago

@Maxwell-ihiaso cheers! Interesting info, I look forward to seeing how you tackle it. Don’t know what’s fully possible with regard to targeting via JavaScript.

Please log in to post a comment

Join 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