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

How can I get my grid column to stay the same size (height and width) when resizing viewports? – Html

I have a container that will have a picture of the day. When changing viewport sizes (mobile screen size) the container gets squashed so much that the image is not readable.. How can I get the containers in my grid system to stay the exact same size relative to the viewport? Thank you!!

html,
body,
form,
main {
  height: 100%;
}

body {
  background-color: #232A35;
  padding: 10px;
}

.content {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.mainheader {
  border: 1px red solid;
  width: 100%;
}

.iotd {
  grid-area: iotd;
}

.banner {
  grid-area: banner;
}

.solutions {
  grid-area: solutions;
}

.services {
  grid-area: services;
}

.tud {
  grid-area: tud;
}

.resources {
  grid-area: resources;
}

.grid-container {
  display: grid;
  grid-template-areas: 'iotd banner banner banner banner banner' 'iotd solutions services resources tud tud';
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  height: 100%;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

@media screen and (max-width: 900px) {
  .grid-container>div {
    font-size: 10px;
  }
}
<div class="content">
  <div class="container-fluid mainheader">
    <div class="grid-container">
      <div class="iotd col">IOTD</div>
      <div class="banner col">Banner</div>
      <div class="solutions col">Solutions</div>
      <div class="services col">Services</div>
      <div class="tud col">The Unrecovery Difference</div>
      <div class="resources col">Resources</div>
    </div>
  </div>
</div>

The container that will hold the image is labeled as "IOTD"
Any help is appreciated

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    resolved the issue by changing the image size rather than the container size when the viewport reaches 900px. I also change the font size to a smaller size which in turn makes all of the containers smaller


  2. 0

    One approach might be to include a grid-template-columns rule to specify how you want the horizontal space apportioned, this can include a minimum absolute (px) width for the first column with the option of allowing it to grow when more space is available using minmax.

    For example, I’ve added the following rule to your css:

    grid-template-columns: minmax(150px, 1fr)  repeat(5, 1fr);

    This divides the grid into 6 columns to be consistent with your area template (which remains in operation) but makes the first column at least 150px wide with the option of expanding with the other columns when extra width is available. The remaining five columns are allocated 1/5 of the available space by specifying 5 1fr fractions.

    Here’s the rule added to your example:

    html,
body,
form,
main {
  height: 100%;
}

body {
  background-color: #232A35;
  padding: 10px;
}

.content {
  height: 100%;
  margin-left: auto;
  margin-right: auto;
}

.mainheader {
  border: 1px red solid;
  width: 100%;
}

.iotd {
  grid-area: iotd;
}

.banner {
  grid-area: banner;
}

.solutions {
  grid-area: solutions;
}

.services {
  grid-area: services;
}

.tud {
  grid-area: tud;
}

.resources {
  grid-area: resources;
}

.grid-container {
  display: grid;
  grid-template-areas: 'iotd banner banner banner banner banner' 'iotd solutions services resources tud tud';
  grid-template-columns: minmax(150px, 1fr)  repeat(5, 1fr);
  gap: 10px;
  background-color: #2196F3;
  padding: 10px;
  height: 100%;
}

.grid-container>div {
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
  padding: 20px 0;
  font-size: 30px;
}

@media screen and (max-width: 900px) {
  .grid-container>div {
    font-size: 10px;
  }
}
    <div class="content">
  <div class="container-fluid mainheader">
    <div class="grid-container">
      <div class="iotd col">IOTD</div>
      <div class="banner col">Banner</div>
      <div class="solutions col">Solutions</div>
      <div class="services col">Services</div>
      <div class="tud col">The Unrecovery Difference</div>
      <div class="resources col">Resources</div>
    </div>
  </div>
</div>

    This page https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Grid_Layout/Grid_Template_Areas has examples where grid-template-areas are combined with grid-template-columns (it also has some ideas on using media queries to suit different view ports).

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

Back To Top
Search