Skip to content
OverviewSolutions
4
Comments
1
Ihsan Nurul iman
@ihsansfd

All comments

  • Jo Blaszak•110
    @jblaszakSubmitted about 2 years ago

    The positioning on a lot of the images on this page were tricky. Did my best to have them positioned correctly for the 1440 resolution, but the method used isn't too friendly for responsiveness. Lots of learning done with grid and how to place elements. Any suggestions on how to position these better and in a more responsive way?

    Learned how to use astro as well, that was interesting and added some overhead to the challenge. Came up against a few framework quirks like adding multiline text and that css is only scoped automatically to the component when used within the style tag. Putting the styles in a separate file doesn't work unfortunately. Ran into some more issues getting all the images to show up on Github pages but eventually got it all working.

    Blogr Landing Page - HTML/CSS/JS/Astro

    2
    Ihsan Nurul iman•110
    @ihsansfdPosted about 2 years ago

    After practicing overlay images for quite some time, I found the best way for me with the desired result.

    The catch: you need to ensure that the image scales down as the breakpoint gets reduced. As in your example, the image doesn't scale until certain breakpoints, and then only after that, it started to get scaled down.

    One way to achieve that is by using flex property. Then you set certain width for the image wrapper and text content with percentages. For example, 30% for text content and 70% for the image wrapper. Then position absolutely the image to the image wrapper. Use percentage also for defining the width of the image, and then correct its position until getting the desired result.

    Now because the width of the image is relative to the image wrapper's width, and the image wrapper is relative to the parent's width, as the breakpoint gets reduced, the image wrapper's width will also get reduced, and the image will get reduced as well as the result.

    But even after you do that, there will be overlapping when the screen gets too small. That's the time to consider bringing the image to the top and make it static instead of absolute, or any other way depending on the project.

    Here's a working example from one of my solutions:

    easybank Landing Page

    easybank hero code

    Hope that helps!

    Marked as helpful
    0