How to move elements using CSS

Akilou Issifou 0
Viewed 54

I want to move the blue icon with the question mark to the bottom of the box right above the paragraph while also moving the gray icon to the top right of the paragraph without messing up my text.

I tried making multiple flex containers but nothing seems to be working.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
html,
body {
  height: 100%;
}

body {
  font-family: Roboto, sans-serif;
  margin: 0;
  background: #aaa;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  width: 480px;
  border-radius: 10px;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .2);
}

.icon {
  color: royalblue;
  font-size: 26px;
  font-weight: 700;
  background: lavender;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button {
  background: #eee;
  border-radius: 50%;
  color: #888;
  font-weight: 400;
  font-size: 16px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
}

button {
  padding: 8px 16px;
  border-radius: 8px;
}

button.continue {
  background: royalblue;
  border: 1px solid royalblue;
  color: white;
}

button.cancel {
  background: white;
  border: 1px solid #ddd;
  color: royalblue;
}


/* SOLUTION: */

.modal {
  display: flex;
  gap: 16px;
  padding: 16px;
  flex-direction: column;
}

.icon {
  /* this keeps the icon from getting smashed by the text */
  display: flex;
  flex-shrink: 0;
}

.ic {
  display: flex;
  align-items: flex-sart;
}

.header {
  display: flex;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.text {
  margin-bottom: 16px;
}
<div class="modal">
  <div class="ic">
    <div class="icon">!</div>
  </div>
  <div class="container">
    <div class="header">Are you sure you want to do that?</div>
    <div class="close-button">✖</div>
  </div>
  <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
  <div class="button">
    <button class="continue">Continue</button>
    <button class="cancel">Cancel</button>
  </div>
</div>

javascript css html
2 Answers

in css add this :

.close-button {
  background: #eee;
  border-radius: 50%;
  color: #888;
  font-weight: 400;
  font-size: 16px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 7px;
  margin-left:5px;
}
.icon {
  color: royalblue;
  font-size: 26px;
  font-weight: 700;
  background: lavender;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 5px;
}

in html

<div class="modal">
    <div class="ic">
      <div class="icon">!</div>
      <div class="header">Are you sure you want to do that?
      </div>
      <div class="close-button">✖</div>
    </div>
    <div class="container">
        
    </div>
    <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
    <div class="button">
      <button class="continue">Continue</button>
      <button class="cancel">Cancel</button>
    </div>
  </div>
  <link rel="stylesheet" href="style.css">
Rahul Mohanty0

put the element in the container that you want it to show up in its corner or edge. then make the parent container position: relative; and your element position: absolute; then control their position using top, right, left, and bottom. here is the code.

@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap');
html,
body {
  height: 100%;
}

body {
  font-family: Roboto, sans-serif;
  margin: 0;
  background: #aaa;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal {
  background: white;
  width: 480px;
  border-radius: 10px;
  box-shadow: 2px 4px 16px rgba(0, 0, 0, .2);
  position: relative;
}

.icon {
  color: royalblue;
  font-size: 26px;
  font-weight: 700;
  background: lavender;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.close-button {
  background: #eee;
  border-radius: 50%;
  color: #888;
  font-weight: 400;
  font-size: 16px;
  height: 24px;
  width: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  
  position: absolute;
  top: 0;
  right: 0;
  margin: 5px;
  cursor: pointer;
}

button {
  padding: 8px 16px;
  border-radius: 8px;
}

button.continue {
  background: royalblue;
  border: 1px solid royalblue;
  color: white;
}

button.cancel {
  background: white;
  border: 1px solid #ddd;
  color: royalblue;
}


/* SOLUTION: */

.modal {
  display: flex;
  gap: 16px;
  padding: 16px;
  flex-direction: column;
}

.icon {
  /* this keeps the icon from getting smashed by the text */
  display: flex;
  flex-shrink: 0;
}

.ic {
  display: flex;
  align-items: flex-sart;
}

.header {
  display: flex;
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 8px;
}

.container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}

.text {
  margin-bottom: 16px;
}
 <div class="modal">
        <div class="ic">
        </div>
        <div class="container">
          <div class="header">Are you sure you want to do that?</div>
        </div>
        <div class="close-button">✖</div>
        <div class="text"><div class="icon">!</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
        <div class="button">
          <button class="continue">Continue</button>
          <button class="cancel">Cancel</button>
        </div>
      </div>

Willpower-70
Related