Submitted about 3 years ago

Article preview component

Yazdun•1,310

@Yazdun

Preview site View code

This is a solution for...Article preview component

HTML
CSS
JS

1newbie

Design comparison

SolutionDesign

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
@argelomnesPosted about 3 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
0
Yazdun•1,310
@YazdunPosted about 3 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
0
argel omnes•1,800
@argelomnesPosted about 3 years ago
@Yazdun Yes, it did.
Marked as helpful
0
Nyein Chan Lay•350
@CrystalNyeinPosted about 3 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
0
Yazdun•1,310
@YazdunPosted about 3 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 !
0
Nyein Chan Lay•350
@CrystalNyeinPosted about 3 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..
0
Nyein Chan Lay•350
@CrystalNyeinPosted about 3 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
0
Yazdun•1,310
@YazdunPosted about 3 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 🤝
0

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