Skip to content
Submitted almost 2 years ago

Responsive news app using CSS Grid

Jeronimo Palacios•50
@giropa832
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...News homepage
  • HTML
  • CSS
  • JS
2junior

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
    @jesusleonel10Posted almost 2 years 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
    0
    Jeronimo Palacios•50
    @giropa832Posted almost 2 years ago

    @jesusleonel10 It helped! Thank you very much

    0

Please log in to post a comment

Log in with GitHub

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