Submitted about 4 years ago

No JS. Did the mobile nav with CSS (hidden checkbox)

InterplanetaryDragon• 320

@InterplanetaryDragon

Preview site View code

This is a solution for...

Project tracking intro component

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

Does anybody have a better way of implementing the grey background in the top right? I originally added it by using absolute positioning and top/right 0, but it goes beyond the body. I set the body to 1440px as the design says but my screen is larger. I found a solution which was to apply a background to the grid cells using ::before and ::after, but it feels like a bit of a hack. Also, it wouldn't work if I wasn't using CSS grid.

Code: .grid::before { content: ""; background-color: hsl(207, 33%, 95%); grid-column: 2/3; grid-row: 1 /2; z-index: -999; }

.grid::after { content: ""; background-color: hsl(207, 33%, 95%); grid-column: 2/3; grid-row: 2 /3; height: 50%; border-radius: 0 0 0 50px; z-index: -998; }

Community feedback

Adarsh Pratap• 5,515

@adarshcodes

Posted about 4 years ago

Hi @InterplanetaryDragon, Great work on this solution.

You can try background-image: url('image-path'); background-repeat: no-repeat; background-position: top right;
There is a text visible 'Hidden checkbox to display or hide mobile menu'.
There is a space on the both of side

InterplanetaryDragon• 320

@InterplanetaryDragon

Posted about 4 years ago

@adarshcodes Hi, thank you for he feedback. I'll experiment with background-image.

I added 'Hidden checkbox to display or hide mobile menu'. for accessibility but didn't realise it was visibile. I'll hide 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