CODEWITHSUNDEEP
javascripthtmlcsslayoutgrid-layout
Gianluca
Gianluca

Reputation: 980

Center div with items laid out using grid on mobile version

I have the following code:

function seeMore() {
  window.location("https://inderatech.com/index.html")
}
.see-more {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 10%;
  overflow: hidden;
  /* Subtle inner border */
  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}

.avatar img {
  height: 70%;
  width: 70%;
  z-index: 2;
  /* Optionally add a drop shadow to the main image  */
  /* to make it feel "lifted"    */
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}

.avatar .background {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(2);
  filter: blur(13px) opacity(0.2);
}


/* Irrelevant styling */

.Mycontainer {
  /* width: 200px; */
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  grid-gap: 20px;
  place-items: center;
  width: 50%;
  margin: 0 auto;
}
<div class="container">
  <div class="section-title text-center">
    <h2>Recent Clients</h2>
  </div>
</div>

<div class="Mycontainer">

  <a href="https://www.6ixangels.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
      <img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
    </div>
  </a>

  <div class="avatar">
    <img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
    <img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
  </div>

  <a href="https://www.marcosbackyardswimming.ca" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./mss-transparent.png" class="background" />
      <img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
    </div>
  </a>

  <div class="avatar">
    <img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
    <img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
  </div>

  <div class="avatar">
    <img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
    <img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
  </div>

  <div class="avatar">
    <img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
    <img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
  </div>

  <a href="https://app.cleaningassistant.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
      <img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
    </div>
  </a>

  <a href="https://www.beaniesforbaxter.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
      <img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
    </div>
  </a>

  <a href="https://6ixhottub.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
      <img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
    </div>
  </a>

</div>

<br>
<br>
<div class="see-more">
  <a href="site-pictures.html"><input type="submit" class="btn btn-defeault btn-send" value="See More"></a>
</div>

On the desktop version, it looks okay, but if it is rendered on narrower screen, then you can see it is not horizontally centered on the page properly. What should I change in my CSS to center the div on the page?

Upvotes: 1

Views: 38

Answers (1)

jiwopene
jiwopene

Reputation: 3627

Using flexbox allows you to automatically wrap the items. (See CSS under your “Irrelevant styling” comment.)

Using grid could seem to be good idea, because it is “modern”, but using grid usually makes sense when you want to create layout with multiple item types. Flexboxes are typically useful when you want to lay out something into columns or rows automatically without setting fixed column count.

.see-more {
  display: table;
  margin-right: auto;
  margin-left: auto;
}

.avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100px;
  height: 100px;
  border-radius: 10%;
  overflow: hidden;
  /* Subtle inner border */
  box-shadow: inset 0 0 1px 1px rgba(0, 0, 0, 0.015);
}

.avatar img {
  height: 70%;
  width: 70%;
  z-index: 2;
  /* Optionally add a drop shadow to the main image  */
  /* to make it feel "lifted"    */
  filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.12));
}

.avatar .background {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  transform: scale(2);
  filter: blur(13px) opacity(0.2);
}


/* Irrelevant styling */

.Mycontainer {
  /* width: 200px; */
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  width: 50%;
  margin: 0 auto;
}
<div class="container">
  <div class="section-title text-center">
    <h2>Recent Clients</h2>
  </div>
</div>

<div class="Mycontainer">

  <a href="https://www.6ixangels.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./6ixangels-logo.png" class="background" />
      <img alt="Avatar" src="./6ixangels-logo.png" width="100" height="100" />
    </div>
  </a>

  <div class="avatar">
    <img alt="" aria-hidden src="./exproducts-treansparne.png" class="background" />
    <img alt="Avatar" src="./exproducts-treansparne.png" width="100" height="100" />
  </div>

  <a href="https://www.marcosbackyardswimming.ca" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./mss-transparent.png" class="background" />
      <img alt="Avatar" src="./mss-transparent.png" width="100" height="100" />
    </div>
  </a>

  <div class="avatar">
    <img alt="" aria-hidden src="./6ixfoods-transparent.png" class="background" />
    <img alt="Avatar" src="./6ixfoods-transparent.png" width="100" height="100" />
  </div>

  <div class="avatar">
    <img alt="" aria-hidden src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" class="background" />
    <img alt="Avatar" src="./ccdf3a2514534cb48d37dfc6009f21d6.webp" width="100" height="100" />
  </div>

  <div class="avatar">
    <img alt="" aria-hidden src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" class="background" />
    <img alt="Avatar" src="http://www.agphq.com/communities/8/004/013/747/898//images/4637902206_134x130.png" width="100" height="100" />
  </div>

  <a href="https://app.cleaningassistant.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" class="background" />
      <img alt="Avatar" src="https://cleaningassistant.com/wp-content/uploads/2020/07/Cleaning-Assistant-180x75-1.png" width="100" height="100" />
    </div>
  </a>

  <a href="https://www.beaniesforbaxter.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./beaniesforbaxter-transparent.png" class="background" />
      <img alt="Avatar" src="./beaniesforbaxter-transparent.png" width="100" height="100" />
    </div>
  </a>

  <a href="https://6ixhottub.com" target="_blank">
    <div class="avatar">
      <img alt="" aria-hidden src="./transparent-6ixhottub.png" class="background" />
      <img alt="Avatar" src="./transparent-6ixhottub.png" width="100" height="100" />
    </div>
  </a>

</div>

<br>
<br>
<div class="see-more">
  <a href="site-pictures.html"><input type="submit" class="btn btn-defeault btn-send" value="See More"></a>
</div>
<script>
  function seeMore() {
    window.location("https://inderatech.com/index.html")
  }
</script>

Upvotes: 2

Related Questions