Skip to content
Submitted over 4 years ago

Fully Responsive Website Development using HTML/CSS and a bit of JS

Salko Balić•40
@thedev966
A solution to the Blogr landing page challenge
Preview (opens in new tab)Code (opens in new tab)

Solution retrospective

It was a fun and quite easy challenge for me. However, there are some parts where I struggled a bit. I'm firstly looking for an overall and honest opinion from you and if you can suggest me something I could/should improve. I've had hard time trying to make those grid and background image assets responsive so If anyone has a good idea or solution, please share. I've tried to use width, height and position of images in percentage or vh/vw but it didn't turn out to work as I expected.

Code

Please log in to post a comment

Log in

Community feedback

  • Chamu•13,860
    @ChamuMutezva

    Great work indeed. Well done. The mobile and desktop view is awesome.

    • take another look on medium devices from about 465px screen size - the navigation does not present well , some elements are sitting on top of others.
    • img must have alt text for accessibility.
    • i noted that the nav has been repeated twice (with one dedicated for mobile) - my opinion is to have one navigation that you can display and move around with css

    happy coding

  • Raymart Pamplona•16,040
    @pikapikamart

    Great work. Your overall layout in the desktop view is pretty good, but the point where you redesign the layout is very much late since your breakpoint is at 380px I guess width, but at that point, your components is now squished or being overlapped by one another. A good Idea would be to add another breakpoint where the layout starts to make the elements overlaps one another. Your grid, well it seems they do what they need and since you're using fr it resizes well ^

  • Jorge Flagel•195
    @jorgeflagel

    Hi, good job! It looks nice.

    For the problem with the images, maybe you can add display: none in the div that contains the image for desktop screens and use the background-image property on the divs .firstFeatures, secondFeatures, ...

    With background-position and background-size you can position the background-image in the right place.

    This is the way I solve these kinds of problems. Hope this can help you.

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