APC: Mobile first, vanilla CSS & JS.

Community feedback

• 

  P

  Emmilie Estabillo•5,540

  @emestabilloPosted about 4 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? :-)

  2

  ---

  

  P

  Robert McGovern•1,075

  @tarasisPosted about 4 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.

  2
• 

  Maxwell Ihiaso•135

  @Maxwell-ihiasoPosted about 4 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 <mark style="background-color: grey">overflow: hidden</mark> 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 <mark style="background-color: grey">tooltip</mark> positioned outside of the ancestor with property <mark style="background-color: grey">overflow:hidden</mark>, 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 <mark style="background-color: grey">share button</mark>

  2

  ---

  

  P

  Robert McGovern•1,075

  @tarasisPosted about 4 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.

  0