3

This Image below shows what should be achieved. enter image description hereTrying to make a Header with 4 images. All 4 in separate corners and a Text in the middle. When you shrink the display size for tablet or mobile the images and whole content should shrink with it. Unfortunately I got a problem with the images. 3 of them are indeed in the corners but the bottom left one is not properly. also the size can not be changed as well as the text to be set right as it should. When putting the text in a new div it does not align right and not shrink automaticaly. When inside the same div like the images also not working.

here is the code from the css and html part.

.Header {
    display: grid;
    grid-template-columns: auto auto;
    justify-content: space-between;
    align-content: space-between;
    height: 700px;
    background-color: antiquewhite;
}
.container {
    text-align: center;
}

import React from 'react';
import styles from '../styles/Header.module.css';
import upperLeft from '../public/upperleft.svg'
import upperRight from '../public/upperright.svg'
import bottomLeft from '../public/bottomleft.svg'
import BottomRight from '../public/bottomright.svg'
import Image from 'next/image';

const Header = () => {
  return (
    <>
    <div className={styles.Header}>
        <Image src={upperLeft} className={styles.box1} />
        <Image src={upperRight} className={styles.box2} />
        <Image src={bottomLeft} className={styles.box3} />
        <Image src={BottomRight} className={styles.box4} />
    </div>
    <div className={styles.container}>
        <h2>spot on Workspace</h2>
    </div>
    </>
  )
}

export default Header


.Header {
  display: grid;
  grid-template-columns: auto auto;
  justify-content: space-between;
  align-content: space-between;
  height: 80vh; /* 700px; */
  background-color: antiquewhite;
}

.container {
  text-align: center;
}
<div class="Header">
  <img src="https://via.placeholder.com/90x60">
  <img src="https://via.placeholder.com/90x60">
  <img src="https://via.placeholder.com/90x60">
  <img src="https://via.placeholder.com/90x60">
</div>

<div class="container">
  <h2>spot on Workspace</h2>
</div>
enter image description here
Remo Furrer
  • 69
  • 5
  • 1
    This type of question is best presented with rendered HTML and CSS. It's difficult to troubleshoot layout issues from bare JSX code. – isherwood Oct 07 '22 at 16:23
  • 1
    I've added a demo snippet. Please revise it so it shows your problem (don't send us to other sites). Protip: use a consistent naming convention for classes. Arbitrary capitalization makes work more difficult. – isherwood Oct 07 '22 at 16:29

1 Answers1

1

You can achieve this by using only CSS. Using position: absolute; on the class "container".

Then the element is removed from the document and can be placed exactly where you want it to go by using the CSS properties top:, left: and transform:

to learn more go to this W3 School tutorial

if the page is 100vh(which means a full window page) then change the top:40% to top:50%.

    .Header {
      display: grid;
      grid-template-columns: auto auto;
      justify-content: space-between;
      align-content: space-between;
      height: 80vh;
      /* 700px; */
      background-color: antiquewhite;
    }

    .container {
      position: absolute;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
  <div class="Header">
    <img src="https://via.placeholder.com/90x60">
    <img src="https://via.placeholder.com/90x60">
    <img src="https://via.placeholder.com/90x60">
    <img src="https://via.placeholder.com/90x60">
  </div>
  <div class="container">
    <h2>spot on Workspace</h2>
  </div>
Thevinu
  • 37
  • 8