Meet landing page using Vue

@Jomagene Hi, thank you for your answer! That's a good idea to use justify-content: space-between;. On smaller desktop screen sizes (1450px), the images should overflow the screen on the left and right. How did you create this effect while keeping this 3 column flex/grid layout?

Hi @MichaHuhn, It depends on the approach you take. Here's how I handled it:

1. Limit Body Width: I set the body max-width to 1440px to control the overall width.

2. Positioning Images: The images are positioned absolutely, with left for the left image and right for the right image. This allows the images to overflow the screen while keeping them aligned to their respective sides.

3. Container Width: I set a specific width for the image containers. However, instead of giving the text content a fixed width, I used max-width. As the screen width decreases, the space between the images decreases first, and then the text content width decreases accordingly.

4. Media Query for Adjustments: Before the layout becomes awkward with flex-direction: row, I used a media query to adjust the layout.

Here's an example of the code:

<figure class="hero-left">
  <img src="./assets/desktop/image-hero-left.png" alt="image hero left" />
</figure>
<figure class="hero-img">
  <img src="./assets/tablet/image-hero.png" alt="image hero" />
</figure>

.hero-left,
.hero-right {
  position: relative;
  img {
    position: absolute;
  }
}

.hero-left,
.hero-right {
  display: block;
  width: 24.625rem;
}

.hero-left img {
  left: -1.62rem;
  top: 0;
}

.hero-right img {
  right: -1.62rem;
  top: 3.5rem;
}

This approach maintains the layout across different screen sizes and ensures the images overflow correctly while keeping the text content responsive. My solution (here)[https://www.frontendmentor.io/solutions/meet-landing-page-using-sassscss-flexbox-and-media-queries-xdq8mZXkJW]

Best, Jomagene

@Jomagene Thank you!

@MichaHuhn Never mind!