Submitted about 4 years ago

Social media dashboard with theme switcher

Vincenzo Marcovecchio• 1,085

@VincenzoMarcovecchio

Preview site View code

This is a solution for...

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

hey spaghetti code here, gotta keep up with the grids! quick question how do you get rid of that top border overlaps kinda rounded on the big cards

Community feedback

Diarrah• 3,418

@Diarrah

Posted about 4 years ago

To get a straight line across + not have color spilling over the sides you can't do border-top, you have to do a pseudo-selector. Just position:absolute, place at top, give height of 5px & then do overflow: hidden on the card itself.

Hope to help, Diarrah

Vincenzo Marcovecchio• 1,085

@VincenzoMarcovecchio

Posted about 4 years ago

@Diarrah thanks Diarrah I remember once I came across something like object-fit : cover so I was a little bit confused but yeah no problems thank you

Gerben Dol• 3,115

@GerbenDol

Posted about 4 years ago

Hey Vincenzo! I think your solution is looking really good. 😁 Just try to center the whole thing on bigger screens and it would look even better! ✨

Vincenzo Marcovecchio• 1,085

@VincenzoMarcovecchio

Posted about 4 years ago

@GerbenDol yep yep we can fix that, thank you!

Emmilie Estabillo• 5,540

@emestabillo

Posted about 4 years ago

Hey Vincenzo, it looks like it's not happening on the Instagram card. Have you tried using the same pseudoclass on the other 3 cards?

Vincenzo Marcovecchio• 1,085

@VincenzoMarcovecchio

Posted about 4 years ago

@emestabillo yeah maybe you should go that way to fix it

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