Submitted over 1 year ago

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

Cuong Ly• 180

@cuonglyy

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Skilled e-learning landing page

HTML
CSS

1newbie

View challenge

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• 1,940

@markuslewin

Posted 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

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