Submitted 9 months ago

Responsive News Homepage.

Joshua Dancey• 60

@joshD90

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 enjoyed this one although I thought it would be much simpler than it was.

Questions

Do I need to concern myself with the site looking perfect at every dimension possible, eg. 768px, 920px, 1100px, 1500px... or is it industry standard to focus on the primary breakpoints?
For the longest time I didn't realise there was a desktop scaled image that worked much better with my CSS-grid, and before realising this I was struggling to get the image to dynamically fit the grid row and height however couldn't find how to do this anywhere online to my satisfaction.

Community feedback

Callie• 170

@Callietron300

Posted 9 months ago

For breakpoints- from what I've, it's actually best to let the content define the breakpoints. This article on breakpoints is really useful

Joshua Dancey• 60

@joshD90

Posted 9 months ago

Start with the small screen first, then expand until it looks like shit. Time for a breakpoint! –Stephen Hay. Actually a really good article, this stood out in particular! Thanks.

@Callietron300

Bishan Kumar Deka• 10

@BishanKD

Posted 9 months ago

Try using width:100% for the image to fit in the grid

Edit: Nevermind. I didn't check the code before commenting. You've already done that

Joshua Dancey• 60

@joshD90

Posted 9 months ago

Thanks for taking a look. I spent nearly a full day trying to get everything from stack overflow to work and I think there was just no major reference point to be working from to allow you to set it to the right scale. @BishanKD

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