Meet landing page using Vue

Community feedback

• 

  P

  MAGENE Sem Joel•320

  @JomagenePosted 3 months ago

  Hi MichaHuhn,

  Great job on the meet-landing-page! Your design looks fantastic. I noticed a few areas where you might simplify things:

  • Grid Layout: I see you've used grid-template-columns: 1fr auto 1fr with transform: translateX(); for positioning. In my experience, Flexbox can simplify this kind of alignment, making it easier to center and adjust elements naturally. For example, I used that fixed width as a max-width of the text-content beside the two images: left and right. All content are justified space-between which gives a more flexible layout. To handle responsiveness, a flex-direction column is sufficient to have the work done.

  • Layout Complexity: While your grid-based layout works, it might be more flexible and maintainable with a Flexbox. This could reduce the need for transformations.

  Overall, your work is impressive! A few small adjustments could make your design even stronger. Have you tried experimenting with Flexbox for layouts like this? I'd love to hear your thoughts.

  Best,
  Jomagene

  0

  ---

  

  P

  Micha Huhn•200

  @MichaHuhnPosted 3 months ago

  @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?

  0

  

  P

  MAGENE Sem Joel•320

  @JomagenePosted 3 months ago

  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

  Marked as helpful

  1

  

  P

  Micha Huhn•200

  @MichaHuhnPosted 3 months ago

  @Jomagene Thank you!

  0

  

  P

  MAGENE Sem Joel•320

  @JomagenePosted 3 months ago

  @MichaHuhn Never mind!

  0