How to put the dice on top of green circle and below the line like the given picture?-CodePudding

I am having trouble moving the green big circle and the dice image on top of each other and below. How do I achieve this as shown in this picture? I want to achieve this

But I could make only this

I tried using the position property but the left: 0px could only move the green circle to the middle. Please comment below how do i fix this issue.

My code is below:

'use strict';

const dice = document.getElementById('dice');

const adviceContainer = document.querySelector('#box');

const renderAdvice = function (data) {
  const html = `
    <h1 >ADVICE <span class='hash' id="hash">#${data.slip.id}</span></h1>
      <p  id="advice">'${data.slip.advice}' </p>
      <img src="/images/pattern-divider-mobile.svg" alt="divider" >
    `;
  adviceContainer.innerHTML = html;
};

async function adviceGenerator() {
  const res = await fetch('https://api.adviceslip.com/advice');

  const data = await res.json();
  renderAdvice(data);
}

dice.addEventListener('click', adviceGenerator);

adviceGenerator();

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;800&display=swap');

* {
    box-sizing: border-box;
}

body {
    font-family: Monrope, 'Arial', 'sans-serif';
    background-color: hsl(220, 22%, 16%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

#container {
    display: flex;
    /* flex-direction: column; */
    /* min-height: 100vh; */
    /* max-width: 350px; */
    margin: 100px auto;
    background-color: hsl(218, 20%, 24%);
    /* overflow: hidden; */
    border-radius: 10px;
    justify-content: center;
    align-items: center;
}

.box {
    /* height: min(100vh, 100%);
    width: min(100vw, 100%); */
    max-width: 350px;
    min-height: 150px;
    /* overflow: hidden; */
}

.heading {
    color: hsl(150, 100%, 66%);
    letter-spacing: 3px;
    text-align: center;
    padding-top: 3em;
    font-size: 0.7em;
    font-weight: 300;
}

.advice {
    color: hsl(203, 33%, 86%);
    font-size: 1.75em;
    font-weight: 800;
    padding: 0.5em;
    /* margin-left: 30px; */
    /* width: clamp(200px, 50%, 20rem); */
}

.divider {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.green {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: hsl(150, 100%, 66%);
    display: inline-block;
    /* position: relative; */
    left: 1px;
    right: 10px;
    top: 45px;
}

.dice {
    position: relative;
    height: 30px;
    width: 30px;
    margin-left: 80px;
    top: 25px;
    left: 5px;
    cursor: pointer;
}

.attribution {
    font-size: 11px;
    text-align: center;
}

.attribution a {
    color: hsl(228, 45%, 44%);
}

@media (min-width:768px) {
    .box {
        max-width: 450px;
    }

    .green {
        height: 70px;
        width: 70px;
        border-radius: 50%;
        background-color: hsl(150, 100%, 66%);
        display: inline-block;
        position: relative;
        left: 175px;
        top: 45px;
    }

    .dice {
        position: relative;
        height: 30px;
        width: 30px;
        margin-left: 80px;
        top: 25px;
        left: 39px;
        cursor: pointer;
    }
}


/* https://api.adviceslip.com/ */
/*
Colors
Primary
Light Cyan: hsl(193, 38%, 86%)
Neon Green: hsl(150, 100%, 66%)
Neutral
Grayish Blue: hsl(217, 19%, 38%)
Dark Grayish Blue: hsl(217, 19%, 24%)
Typography
Body Copy
Font size (quote): 28px
Font
Family: Manrope
Weights: 800
*/

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <!-- displays site properly based on user's device -->
  <link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
  <link rel="stylesheet" href="style.css">

  <title>Frontend Mentor | Advice generator app</title>

</head>
<body>
  <section id="container">
    <section  id="box">
      <!-- <h1 >ADVICE <span class='hash' id="hash">#</span></h1>
      <p  id="advice">'Lorem ipsum dolor sit amet consectetur adipisicing elit.!' </p> -->

    </section>
    <span ></span>
    <img src="/images/icon-dice.svg" alt="dice"  id="dice">
  </section>
  <div >
    Challenge by <a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a>.
    Coded by <a href="https://www.linkedin.com/in/nelson-uprety-951a2b156/">Nelson Uprety</a>.
  </div>

  <script src="script.js"></script>
</body>
</html>

Thank you for the help.

CodePudding user response：

You could just have one div which has that green as background color and a background image, centered and say 50% size. That way you don't have to try to align separate elements e.g. by having them in the same container.

Here's a simple example:

div {
  background-color: palegreen;
  background-image: url(https://picsum.photos/id/237/300/300);
  background-size: 50% 50%;
  background-position: center center;
  background-repeat: no-repeat;
  border-radius: 50%;
  width: 30vmin;
  aspect-ratio: 1 / 1;
}

<div></div>

CodePudding user response：

You could reshuffle your html a bit and your JavaScript could be simpler.

'use strict';

const dice = document.getElementById('dice');

const adviceContainer = document.querySelector('#box');

const renderAdvice = function (data) {
  document.querySelector('#hash').innerText = `#${data.slip.id}`;
  document.querySelector('#advice').innerText = data.slip.advice;
};

async function adviceGenerator() {
  const res = await fetch('https://api.adviceslip.com/advice');

  const data = await res.json();
  renderAdvice(data);
}

dice.addEventListener('click', adviceGenerator);

adviceGenerator();

@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@300;400;500;800&display=swap');

* {
  box-sizing: border-box;
}

body {
  font-family: Monrope, 'Arial', 'sans-serif';
  background-color: hsl(220, 22%, 16%);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#container {
  margin: 100px auto;
  background-color: hsl(218, 20%, 24%);
  border-radius: 10px;
}

.box {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  max-width: 350px;
  min-height: 150px;
  justify-content: center;
}

.heading {
  flex-basis: 100%;
  color: hsl(150, 100%, 66%);
  letter-spacing: 3px;
  text-align: center;
  padding-top: 3em;
  font-size: 0.7em;
  font-weight: 300;
}

.advice {
  flex-basis: 100%;
  color: hsl(203, 33%, 86%);
  font-size: 1.75em;
  font-weight: 800;
  padding: 0.5em;
  text-align: center;
}

.divider {
  flex-basis: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}

.green {
  height: 70px;
  width: 70px;
  border-radius: 50%;
  background-color: hsl(150, 100%, 66%);
  display: inline-block;
  position: relative;
  top: 25px;
}

.dice {
  position: relative;
  height: 30px;
  width: 30px;
  top: 25px;
  left: 5px;
  cursor: pointer;
}

.attribution {
  font-size: 11px;
  text-align: center;
}

.attribution a {
  color: hsl(228, 45%, 44%);
}

@media (min-width: 768px) {
  .box {
    max-width: 450px;
  }

  .green {
    height: 70px;
    width: 70px;
    border-radius: 50%;
    background-color: hsl(150, 100%, 66%);
    display: inline-block;
    position: relative;
    top: 25px;
  }

  .dice {
    position: relative;
    height: 30px;
    width: 30px;
    margin-left: 80px;
    top: 25px;
    left: 39px;
    cursor: pointer;
  }
}

/* https://api.adviceslip.com/ */
/*
Colors
Primary
Light Cyan: hsl(193, 38%, 86%)
Neon Green: hsl(150, 100%, 66%)
Neutral
Grayish Blue: hsl(217, 19%, 38%)
Dark Grayish Blue: hsl(217, 19%, 24%)
Typography
Body Copy
Font size (quote): 28px
Font
Family: Manrope
Weights: 800
*/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <!-- displays site properly based on user's device -->
    <link
      rel="icon"
      type="image/png"
      sizes="32x32"
      href="./images/favicon-32x32.png"
    />
    <link rel="stylesheet" href="style.css" />

    <title>Frontend Mentor | Advice generator app</title>
  </head>
  <body>
    <section id="container">
      <section  id="box">
        <h1 >
          ADVICE <span  id="hash"></span>
        </h1>
        <p  id="advice"></p>
        <img
          src="/images/pattern-divider-mobile.svg"
          alt="divider"
          
        />
        <span 
          ><img src="/images/icon-dice.svg" alt="dice"  id="dice"
        /></span>
      </section>
    </section>
    <div >
      Challenge by
      <a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
        >Frontend Mentor</a
      >. Coded by
      <a href="https://www.linkedin.com/in/nelson-uprety-951a2b156/"
        >Nelson Uprety</a
      >.
    </div>

    <script src="script.js"></script>
  </body>
</html>