Html Question posted in
Some basic documentation can be found here.

Centering HTML DIV with CSS doesn't work, what am I doing wrong?

I have a school assignment I’m currently working on and I have run into a problem I can’t solve.
I have created two divs with grid systems, one for a calendar and one for a news section and when I scale it down to the mobile version it won’t center.

Can anyone help me solve this issue?

I have tried clearing floats, using margin: 0 auto; and justify-content: center; and such but I suspect that I’ve missed something somewhere that won’t let me move the divs.

It’s the image-grid / news-grid that won’t center on the mobile version.

.wrapper {
  margin: 0 auto;
  height: auto;
  max-width: 1100px;
  padding: 2em;
  margin-top: 30px;
}

.column2 {
  float: right;
}

/* inställning för att ta bort understryken länk i kolumn 2 */
.column2 a {
  text-decoration: none;
}

.image-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  /* två kolumner */
  gap: 18px;
  /* mellanrum mellan bilderna */
}

/* design på image grid */
.image-grid img {
  width: 200px;
  height: 200px;
  border-radius: 3px;
  /* rundar av kanter på bilderna */
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  /* skugga på bilderna */
  object-fit: cover;
  /* behåll aspekt ration */
}

.calendarbutton {
  background-color: #3f8c9c;
  width: 200px;
  height: 50px;
  border: none;
  font-family: "Alternate Gothic Cond ATF", Helvetica, sans-serif;
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
  line-height: 3rem;
}

.calendarbuttondiv {
  display: flex;
  /* använd flexbox */
  justify-content: center;
  /* centrerar innehållet */
  clear: both;
  /* rensa float */
}

.news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  /* en rad */
  grid-row: 1;
  gap: 25px;
  /* mellanrum mellan bilderna */
}

.news-grid img {
  width: 350px;
  height: 245px;
  border-radius: 3px;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.1);
  object-fit: cover;
  /* behåll aspekt ration */
}

/* design på nyhetsknappen */
.newsbutton {
  background-color: #3f8c9c;
  width: 200px;
  height: 50px;
  margin: 0 auto;
  /* centera knappen */
  border: none;
  font-family: "Alternate Gothic Cond ATF", Helvetica, sans-serif;
  color: #fff;
  font-size: 1.5rem;
  text-align: center;
  line-height: 3rem;
  margin-bottom: 150px;
}

.row1 {
  margin-top: 120px;
}

.row1 a {
  text-decoration: none;
}
<div class="column2">
  <h2>KALENDER</h2>
  <!-- kalenders bilder -->
  <div class="image-grid">
    <div><img src="images/kalender1.png" alt="Kalender bild 1"></div>
    <div><img src="images/kalender2.png" alt="Kalender bild 2"></div>
    <div><img src="images/kalender3.png" alt="Kalender bild 1"></div>
    <div><img src="images/kalender4.png" alt="Kalender bild 4"></div>
    <div><img src="images/kalender1.png" alt="Kalender bild 5"></div>
    <div><img src="images/kalender2.png" alt="Kalender bild 6"></div>
    <span class="emptyspace"></span>
  </div>
  <!-- kanpp för att se alla kalenders händelser  -->
  <div class="calendarbuttondiv"><a href="https://www.hv.se/kalender/" target="_blank" class="calendarbutton">Se
          hela kalendern</a></div>
</div>
<!-- container som innehåller nyhetsgrid -->
<div class="row1">
  <h2>NYHETER</h2>
  <!-- bilder och länkar till kalender -->
  <div class="news-grid">
    <div>
      <a href="https://www.mynewsdesk.com/se/hogskolanvast/news/kroenika-en-satsning-med-bara-vinnare-477416" target="_blank"><img src="images/nyheter1.png" alt="Kalender bild 1"></a>
    </div>
    <div>
      <a href="https://www.mynewsdesk.com/se/hogskolanvast/news/industrin-maaste-se-bortom-den-digitala-tekniken-477049" target="_blank"><img src="images/nyheter2.png" alt="Kalender bild 2"></a>
    </div>
    <div>
      <a href="https://www.mynewsdesk.com/se/hogskolanvast/news/nya-former-foer-samverkan-mellan-hoegskolan-vaest-och-kommuner-477152" target="_blank"><img src="images/nyheter3.png" alt="Kalender bild 1"></a>
    </div>
    <span class="emptyspace"></span>
    <!-- knapp för att se alla nyheter på hv.se -->
    <a href="https://www.mynewsdesk.com/se/hogskolanvast" target="_blank" class="newsbutton">Se flera nyheter</a>
  </div>
</div>
</div>
Tags:

3

Answers


  1. 0

    CSS has @media to deal with different screen size, you can define the max-width of the screen and add style for that screen.

    The following will be applied only for mobile screens:

    @media (max-width: 480px) {
  .image-grid, .news-grid {
    grid-template-columns: 1fr; 
  }

  .image-grid img, .news-grid img {
    width: 100%;
    height: auto;
  }

  .wrapper, .row1 {
    padding: 1em; 
    margin: 0 auto; 
  }

  /* Add additional styles */
}
    Login or Signup to reply.
  2. 0

    You will just need to use media queries to ensure the display is responsive. Something like this:

    /* Other styles remain the same */

/* Mobile styles */
@media (max-width: 767px) {
  .column2, .row1 {
    float: none;
    width: auto;
  }

  .image-grid, .news-grid {
    grid-template-columns: 1fr; /* Stacks images in one column */
    justify-items: center; /* Centers grid items within the grid */
    gap: 18px; /* Adjust the gap as needed */
  }

  /* Adjust image width to be less than or equal to the grid width */
  .image-grid img, .news-grid img {
    width: 100%;
    height: auto; /* Maintain the aspect ratio */
    max-width: 200px; /* Or the max width you prefer */
  }

  .calendarbuttondiv, .calendarbutton, .newsbutton {
    width: 100%; /* Full width of the parent */
    justify-content: center; /* Center button with flexbox */
  }

  .newsbutton {
    margin-bottom: 50px; /* Adjust the bottom margin if needed */
  }
}
    Login or Signup to reply.
  3. 0

    Use @media for that, also i would recommend flexbox instead of grid, with flexbox your parent div’s content will be automatically scaled according to its size,

    Here’s an example

    .parent-div {
    display: flex;
    flex-direction: // row for left and column for right
    flex: 1;
}

    Imagine the flexbox as a box where flex: 1 represents the entirety of the box.
    So in your case, with a grid on 2×2 it would be flex: 0.5 on each child of your parent div. And remember, you want to scope those css classes at minimum 1024px so your divs will be centered automatically on mobile. (That’s flexbox magic)

    @media (min-width: 1024px) {
    .right-column-child-box {
        flex: 0.5;
    }
    .left-column-child-box {
        flex: 0.33 // so it'll be a 3x3 in left
    }
}

    You can check the Documentation for flexbox here.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search