Skip to content
Submitted over 2 years ago

huddle-landing-page-with-single-introductory-section

Tom R.•110
@TomTwig
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Huddle landing page with a single introductory section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

What are the best practices to handle different screen sizes when your background image has a specific resolution? I am asking because the transition between desktop and mobile plus higher screen resolutions looking a bit weird. Maybe limit the screen size or background-image: cover?

Community feedback

  • Lucas 👾•104,400
    @correlucasPosted over 2 years ago

    Hello Tom, congratulations for you solution! Good work!

    I had the same issue with the background that doesn't fit in the screen when I start to stretch the window. The solution I found was to swap between background-size: contain; / background-size: cover; depending of the page width. I also set some media queries for the background and then changed the img files when it becomes mobile.

    You can check my code here to understand what I did to keep the background full screen in all instances:

    https://www.frontendmentor.io/solutions/product-preview-card-vanilla-css-and-custom-hover-state-on-hero-85A1JsueD1

    Marked as helpful
    1

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