When the screen is minimized, my website doesn't align to the center as expected

Question

When the screen is minimized, my website doesn't align to the center as expected

When the screen is maximized everything looks great, but when I minimize it, the content doesn't center. I tried using margin: auto; in the "main-div" class, but then everything shifted to the top left corner. So, I added a "wrapper-div" to contain the main div and align it, but it doesn't seem to be working as expected.

There seems to be something at the top that I can't quite figure out. Click here for image description


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>

html css

Answer 1

Answer №1

To center your content on any screen, apply the following CSS properties to your main div: display:flex;, align-items:center;, and justify-content:center;.

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>

Answer 2

To center your content on any screen, apply the following CSS properties to your main div: display:flex;, align-items:center;, and justify-content:center;.

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>

Answer 3

Answer №2

Are you satisfied with this?

 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>

Don't forget to specify the width of your parent element, and use margin: 0 auto for horizontal alignment.

Answer 4

Are you satisfied with this?

 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>

Don't forget to specify the width of your parent element, and use margin: 0 auto for horizontal alignment.

Answer 5

Answer №3

The issue lies within the code snippet below:

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

Using the margin property in this way will result in a fixed spacing on the left of the element, regardless of screen size.

To address this issue, adjust the margin value to be proportional to the screen width like so:

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

Learn more about using the vw unit in CSS: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw

Alternatively, you can utilize @media queries to set different margin values for smaller screens:

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

Note that relying solely on @media queries is not recommended as it may require multiple adjustments for various screen sizes.

For further information on @media queries in CSS, visit: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 6

The issue lies within the code snippet below:

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

Using the margin property in this way will result in a fixed spacing on the left of the element, regardless of screen size.

To address this issue, adjust the margin value to be proportional to the screen width like so:

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

Learn more about using the vw unit in CSS: https://www.w3schools.com/cssref/tryit.asp?filename=trycss_unit_vw

Alternatively, you can utilize @media queries to set different margin values for smaller screens:

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

Note that relying solely on @media queries is not recommended as it may require multiple adjustments for various screen sizes.

For further information on @media queries in CSS, visit: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Answer 7

Answer №4

Are you looking to center your CSS styling?

I recently came across some valuable information about margin styling in the Mozilla documentation

The margin property allows for one, two, three, or four values to be specified. These values can be lengths, percentages, or even the keyword 'auto'. Using negative values can bring an element closer to its neighbors than default positioning.

When using a single value, that margin applies uniformly to all sides of the element.

However, simply setting

margin: auto;

may not suffice to center your element on the page as desired.

A more specific declaration like

margin: 0 auto;

is often necessary when employing two values. The first value affects top and bottom margins, while the second influences left and right margins.

By implementing this styling adjustment, your element should appear centered on the page.

I hope you found this explanation helpful. Thank you

Answer 8

Are you looking to center your CSS styling?

I recently came across some valuable information about margin styling in the Mozilla documentation

The margin property allows for one, two, three, or four values to be specified. These values can be lengths, percentages, or even the keyword 'auto'. Using negative values can bring an element closer to its neighbors than default positioning.

When using a single value, that margin applies uniformly to all sides of the element.

However, simply setting

margin: auto;

may not suffice to center your element on the page as desired.

A more specific declaration like

margin: 0 auto;

is often necessary when employing two values. The first value affects top and bottom margins, while the second influences left and right margins.

By implementing this styling adjustment, your element should appear centered on the page.

I hope you found this explanation helpful. Thank you

When the screen is minimized, my website doesn't align to the center as expected

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Unable to generate a navigation panel using HTML/CSS and jQuery

Can a linked checkbox be created?

Navigation problems resolved: The fixed-top class causes issues with navbar-right and obscures the logo

JavaScript Failing to Validate User Input in Form

Ensure that grid rows occupy the least amount of space possible

Creating dependent dropdown lists is a useful way to streamline data entry and ensure accuracy in your

Conceal all div elements except for displaying the initial two

How to Use Laravel to Create HTML Divs Without Images

Whenever the download bar emerges at the bottom, the slideshow content on the page suddenly shifts upwards

When enlarging or extending the container, text starts to spill out

What is the best way to store a range object obtained from getSelection in order to recreate it on a separate page load?

Leveraging a vacant CSS class to locate specific HTML elements

Is there a way to extract the number from a b tag using selenium with Python?

What is the best way to restrict user input to specific numbers only?

Is there a way to automatically redirect my login page back to the original page in case of login failure?

Tips on how to retrieve the value of the second td in an HTML table when clicking on the first td utilizing jQuery

Tips for saving the visibility status of a <div> in your browser bookmarks?

The hamburger icon is not visible on smaller screens when using the Bootstrap 5 navbar

Tips for making jQuery maphilight function properly?

The Jquery function .load() doesn't load HTML comment tags as expected