Frontend Mentor | Article preview component coding challenge solution

Solution retrospective

Hello ! Here is my solution to this challenge and I have a question on this:

On desktop, div which contains all social media icons, is bigger than card itself but card has overflow:hidden because I didn't want to add border-radius to the image, So when it reaches desktop breakpoint, I made overflow visible and added border-radius to the image. Is there anyway that I can cancel hidden overflow only for social media icons ?

✅ I'll be glad to know your thoughts and feedbacks on the solution and possible answers to my question.

Community feedback

argel omnes• 1,800

@argelomnes

Posted over 2 years ago

Hi Yazdun,

That's not possible. You can only cancel overflow:hidden from the element you applied it to. Good job! Love the subtle animation and theme switch.

Marked as helpful

Yazdun• 1,310

@Yazdun

Posted over 2 years ago

@argelomnes Hi Argel and Thanks for the answer I appreciate it 🙏 did theme switch function properly on your machine ? Nyein had some issue with that so I'm looking into it

argel omnes• 1,800

@argelomnes

Posted over 2 years ago

@Yazdun Yes, it did.

Marked as helpful

Nyein Chan Lay• 350

@CrystalNyein

Posted over 2 years ago

This is super cool. All the transitions are so smooth. But one thing is that theme button doesn't seem to work... As for the question, I'm still on a learning phase so, I did the same & I don't know how to improve it yet. Great work!

Marked as helpful

Yazdun• 1,310

@Yazdun

Posted over 2 years ago

@CrystalNyein Thanks for your feedback Nyein !

Looks like my worst fear came true 🙂 Theme button works fine on my pc and mobile, Can you tell me which browser and OS are you using ? Also theme should have applied based on your OS preference, which theme did you get when you opened the url ?

Thanks in advance !

Nyein Chan Lay• 350

@CrystalNyein

Posted over 2 years ago

@Yazdun I'm so sorry for the late reply. I'm a little bit busy so I doesn't check the reply. First - I'm using Chrome with MacOS. Second - I chose auto for the theme preference. Third - It's light theme

I don't know why ... it just doesn't work..

Nyein Chan Lay• 350

@CrystalNyein

Posted over 2 years ago

@Yazdun I check it back again. When my theme was set to auto or light, it doesn't seem to work. Because the website starting mode is dark mode. It works I change my theme to dark... Hope this helps.

Marked as helpful

Yazdun• 1,310

@Yazdun

Posted over 2 years ago

@CrystalNyein Firstly thats not a problem ! Secondly I've heard this theme method that I apply to my projects can get tricky on mac, but unfortunately I didn't have access to mac to test it out myself, Now that I'm sure I will definitely do more research on this.

Huge thanks for informing me about theme functionality 🤝

Article preview component

Design comparison

Solution retrospective

Community feedback

Please log in to post a comment

Join our Discord community