Skip to content
Submitted over 1 year ago

Skilled E-learning landing page | HTML, CSS, Grid, Flex

Cuong Ly•180
@cuonglyy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Skilled e-learning landing page
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Desktop and Tablet Design

  • The image overlaps with <div class="intro-left"> when the browser shrinks horizontally, any ideas on how to position the image without absolute positioning so the contents of <div class="intro-left"> could shrink accordingly?

Mobile Design

  • Background-size: contain would decrease the size of the image. How would I be able to keep its intended size and have it responsive?
  • <div class="intro-left">, <p class="intro-content">, and <h1 ckass="header"> look like their width is extending on the right side, is it because of the image?

Thanks!!

Community feedback

  • markus•2,160
    @markuslewinPosted over 1 year ago

    I also struggled with the image across all breakpoints!

    • What if you use padding to occupy the space the image would've taken if it was in-flow? I.e. <div class="intro-left" style="padding-right: 50rem;"> (and remove the set width).

    • I think this is an "impossible" problem. If the image shrinks, it won't be the intended size. If the image doesn't shrink, it'll break the layout and cause overflow. I'd set a minimum width on .intro__img, so that it stays visible for the user.

    • .intro-left and .intro-content has a set width: 34.2rem;, so they're not allowed to shrink.

    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