Blogr Landing Page - HTML/CSS/JS/Astro

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!

Hey @jblaszak, some suggestions to improve you code:

• I suggest staying away from using Astro until you understand the fundamental of Web Development.

• Your logo is arguably most important image in your site, the alt tag should NOT be blank.

• Your HTML layout is incorrect. There's no structure and elements are not being used properly.

To better structure your content and make it a lot clearer, you want to implement Semantic HTML. For your code, you want to wrap

Why use Semantic HTML?

1. Accessibility: Semantic HTML makes webpages accessible for mobile devices and for people with disabilities as well. This is because screen readers and browsers are able to interpret the code better.
2. SEO: It improves the website SEO, or Search Engine Optimization, which is the process of increasing the number of people that visit your webpage. With better SEO, search engines are better able to identify the content of your website and weight the most important content appropriately.
3. Easy to Understand: Semantic HTML also makes the website’s source code easier to read for other web developers.

More Info

https://www.freecodecamp.org/news/semantic-html5-elements/

https://dev.to/poulamic/writing-semantic-html-3436

• You are not using headings properly. They are meant to add structure to your content. The <h1> heading can only be used ONCE per page. You used it several times. In this challenge, there should be an **<h1>, <h2> and <h3> **headings.

• For media queries, I definitely suggest using em for them. By using px your assuming that every users browser (mobile, tablet, laptop/desktop) is using a font size of 16px (this is the default size on browser). Em's will help with users whose default isn't 16px, which can sometimes cause the your content to overflow and negatively affect your layout.

More Info: https://betterprogramming.pub/px-em-or-rem-examining-media-query-units-in-2021-e00cf37b91a9

https://uxdesign.cc/why-designers-should-move-from-px-to-rem-and-how-to-do-that-in-figma-c0ea23e07a15