-1

when the screen is max all is good but when i minimize it, the content doesn't center. when i use margin: auto; in "main-div" everything goes to the top left corner so i added "wrapper-div" to contain the main div and align that but it doesn't seem to be doing anything.

also there is something at the top which i can't seem to figure out what.enter image description here

body {
  background-color: hsl(30, 38%, 92%);
}

table {
  border-radius: 20px;
  overflow: hidden;
  border-collapse: collapse;
}

.wrapper-div {
  width: auto;
  margin: auto;
}

.main-div {
  width: fit-content;
  margin: 135px 470px;
  position: absolute;
}
<body>
  <div class="wrapper-div">
    <div class="main-div">
      <table cellpadding="0">
        <tr class="parent-row">
          <td class="img-container">
            <img src="images/image-product-desktop.jpg" alt="image-product-desktop-version" />
          </td>
          <td class="text-container">
            <h3 class="title1">PERFUME</h3>
            <h2 class="title2"><b>Gabrielle Essence Eau De Parfum</b></h2>
            <p class="description-text">
              A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.
            </p>
            <div class="both-prices">
              <h2 class="new-price">$149.99</h2>
              <h4 class="old-price">$169.99</h4>
            </div>
            <a class="cart-btn" href="#"><span></span>Add to cart</a>
          </td>
        </tr>
      </table>
    </div>
  </div>
</body>
Beki
  • 3
  • 3

4 Answers4

0

is this what you want?

 body {
      background-color: hsl(30, 38%, 92%);
    }
    
    table {
      border-radius: 20px;
      overflow: hidden;
      border-collapse: collapse;
    }
    
    .wrapper-div {
      background-color:red;
      width: 80vw;
      margin:0 auto;
    }
    
    .main-div {
      width: fit-content;


    }
 <div class="wrapper-div">
    <div class="main-div">
      <table cellpadding="0">
        <tr class="parent-row">
          <td class="img-container">
            <img src="s1.jpg" alt="image-product-desktop-version" />
          </td>
          <td class="text-container">
            <h3 class="title1">PERFUME</h3>
            <h2 class="title2"><b>Gabrielle Essence Eau De Parfum</b></h2>
            <p class="description-text">
              A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.
            </p>
            <div class="both-prices">
              <h2 class="new-price">$149.99</h2>
              <h4 class="old-price">$169.99</h4>
            </div>
            <a class="cart-btn" href="#"><span></span>Add to cart</a>
          </td>
        </tr>
      </table>
    </div>
  </div>

remember to add width to your parent , and margin: 0 auto is used for horizontal alignment

Arash Seifi
  • 385
  • 1
  • 9
0

Use display:flex; align-items:center; justify-content:center; on your maindiv it will be centered in any screen.

body {
  background-color: hsl(30, 38%, 92%);
}

table {
  border-radius: 20px;
  overflow: hidden;
  border-collapse: collapse;
}


.main-div {
  display:flex;
  align-items:center;
  justify-content:center;
  height:100vh;
}
<body>
  <div class="wrapper-div">
    <div class="main-div">
      <table cellpadding="0">
        <tr class="parent-row">
          <td class="img-container">
            <img src="images/image-product-desktop.jpg" alt="image-product-desktop-version" />
          </td>
          <td class="text-container">
            <h3 class="title1">PERFUME</h3>
            <h2 class="title2"><b>Gabrielle Essence Eau De Parfum</b></h2>
            <p class="description-text">
              A floral, solar and voluptuous interpretation composed by Olivier Polge, Perfumer-Creator for the House of CHANEL.
            </p>
            <div class="both-prices">
              <h2 class="new-price">$149.99</h2>
              <h4 class="old-price">$169.99</h4>
            </div>
            <a class="cart-btn" href="#"><span></span>Add to cart</a>
          </td>
        </tr>
      </table>
    </div>
  </div>
</body>
UmairFarooq
  • 1,269
  • 1
  • 3
  • 8
0

The problem is in the following code:

 .main-div {
      width: fit-content;
      margin: 135px 470px;
      position: absolute;
    }

The margin property you used adds a fixed space to the left of the element regardless of screen width.

You can solve the problem by making the margin value proportional to the width of the screen as follows :

.main-div {
  width: fit-content;
  margin: 12vw 20vw;
  position: absolute;
}

Know more about vw unit in css: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw

Another way is to use the @media to add different values to the margin on small screens :

@media only screen and (max-width: 600px) {
  .main-div {
     width: fit-content;
     margin: 110px 170px;
     position: absolute;
  }
}

This method is not recommended because you will have to add more than one @media to different screens

Know more about @media unit in css: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

عمر - OMAR
  • 42
  • 5
0

Do you need to manipulate your css styling to be placed in center position?

Let me share about what i've read in the docs for margin styling

The margin property may be specified using one, two, three, or four values. Each value is a , a , or the keyword auto. Negative values draw the element closer to its neighbors than it would be by default.

When one value is specified, it applies the same margin to all four sides.

But typing styling like

margin : auto;

Still wasn't enough to make our element to be shown at the center of page

We need to declare it more specific, like

margin : 0 auto;

When two values are specified, the first margin applies to the top and bottom, the second to the left and right.

After you apply that styling, your element will be shown in the center position.

Hope it was helpful. Thank you

Taufik Romadhon
  • 185
  • 10