Submitted over 1 year ago

Responsive news app using CSS Grid

Jeronimo Palacios• 50

@giropa832

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

News homepage

HTML
CSS
JS

2junior

View challenge

Design comparison

SolutionDesign

Solution retrospective

I had a lot of fun building this project.

I cannot manage to have a proper solution for the mobile menu. Can you suggest where to look?

I am not sure how to manage the two images (one for desktop and one for mobile). CSS? A hidden div?

To build the gray lines I used a little hack: Have a border-bottom of the same color of the background below the 'New' title in the sidebar and move it 1px. It is the right way to do it?

Feedback is very appreciated.

Community feedback

Jesus• 410

@jesusleonel10

Posted over 1 year ago

Hi !

For the mobile menu I usually always make a separate menu with a position: fixed that uses 100% of the height of the screen and with the button you change its width, here is an example:

https://codepen.io/jesusleonel10/pen/rNJZpgy

For the main image use the picture tag to change the image according to the resolution without using css

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

I hope it helped you 😁✌

Marked as helpful

Jeronimo Palacios• 50

@giropa832

Posted over 1 year ago

@jesusleonel10 It helped! Thank you very much

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