What should be done to boxes so that it fits below 308px media width and thus make it responsive

user_19171988 0
Viewed 22

What should be done to the boxes or cards which minmax value is 240px or 15rem, so that it fits the screen size below 308px media width. Its grid layout and fits well enough till 308px. It loses its responsivity in 308px.Link of the work is given below.

https://codepen.io/TA0011/pen/ZExJgmr Please guide me in this.

.container-a{
  margin:10px auto;
  padding:0;
  width: calc(100% - 6.25rem);
  position:relative;
}
.wrapper{
  height:100%;
  display:grid;
  grid-template-columns:repeat(5, 1fr);
  grid-template-areas: "blog-container blog-container blog-container blog-container blog-sidebar";
  grid-gap:10px;
}
.wrapper .blog-container{
  grid-area: blog-container;
  padding-right:10px;
    
}
.wrapper .blog-sidebar{
  grid-area: blog-sidebar;
}
.wrapper .blog-container span,
.wrapper .blog-sidebar span{
  background-color: #007bff;
    padding: 5px 10px;
    position:relative;
    color: #fff;
  z-index: -1;
  width: 3.5rem;
}
.blog-container hr,
.blog-sidebar hr{
    width: 100%;
    color:#007bff;
    margin-top: 4px;
    position: relative;
    z-index: -2;
}
.blog-container .blog-cards{
  display: grid;
    grid-template-columns: repeat(auto-fill, minmax(15rem,1fr));
    grid-gap: 10px; 
}
.blog-cards .card{
  min-width:16.875 rem;
  flex:1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  height: 180px;
    width: 100%;
    border: 1px solid #ccc;
    background: #FF7F50;
  color: #fff;
  font-weight: 500 !important;
    position: relative;
  text-align:center; 
}
.widgets{
    background: #fff;
    border:  1px solid #ccc;
    margin-bottom: 10px;
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(270px,1fr));
    grid-gap: 10px;
    padding:  5px;
}
.widgets img{
    width: 100%;
    float: none;
    display:block;
    object-fit: fill;
}
.widgets .card{
  min-width:16.875 rem;
  flex:1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  height: 180px;
    width: 100%;
    border: 1px solid #ccc;
    background: #FF7F50;
  color: #fff;
  font-weight: 500 !important;
    position: relative;
  text-align:center; 
}
@media(max-width: 768px){
  .container-a{
    width:100%;
  }
  .wrapper{
        grid-template-rows: auto;
        grid-template-columns: 1fr;
        grid-template-areas: "blog-container"
        "blog-sidebar";
    }
}
<section class="container-a" aria-label="blog-content">
  <div class="wrapper">
    <div class="blog-container">
      <span>Content</span><hr>
      <div class="blog-cards">
        <div class="card">Card1</div>
        <div class="card">Card2</div>
        <div class="card">Card3</div>
        <div class="card">Card4</div>
        <div class="card">Card5</div>
      </div><!--cards-->
    </div> 
    <div class="blog-sidebar">
      <span>Sidebar</span><hr>
      <div class="widgets">
        <div class="card">Card1</div>
        <div class="card">Card2</div>
      </div>
    </div> 
  </div>
</section>

css html
1 Answers

Just make a media-query for max-width: 308px where you change the minmax-value of the grid-template-columns-property. I used 100% to ensure it doesn't overflow and padding-right: 0 on the container to align everything properly:

@media(max-width: 308px) {
  .wrapper .blog-container {
    padding-right: 0;
  }
  .blog-container .blog-cards {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
  .widgets {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
}


.container-a {
  margin: 10px auto;
  padding: 0;
  width: calc(100% - 6.25rem);
  position: relative;
}

.wrapper {
  height: 100%;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  grid-template-areas: "blog-container blog-container blog-container blog-container blog-sidebar";
  grid-gap: 10px;
}

.wrapper .blog-container {
  grid-area: blog-container;
  padding-right: 10px;
}

.wrapper .blog-sidebar {
  grid-area: blog-sidebar;
}

.wrapper .blog-container span,
.wrapper .blog-sidebar span {
  background-color: #007bff;
  padding: 5px 10px;
  position: relative;
  color: #fff;
  z-index: -1;
  width: 3.5rem;
}

.blog-container hr,
.blog-sidebar hr {
  width: 100%;
  color: #007bff;
  margin-top: 4px;
  position: relative;
  z-index: -2;
}

.blog-container .blog-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-gap: 10px;
}

.blog-cards .card {
  min-width: 16.875 rem;
  flex: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  height: 180px;
  width: 100%;
  border: 1px solid #ccc;
  background: #FF7F50;
  color: #fff;
  font-weight: 500 !important;
  position: relative;
  text-align: center;
}

.widgets {
  background: #fff;
  border: 1px solid #ccc;
  margin-bottom: 10px;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  grid-gap: 10px;
  padding: 5px;
}

.widgets img {
  width: 100%;
  float: none;
  display: block;
  object-fit: fill;
}

.widgets .card {
  min-width: 16.875 rem;
  flex: 1;
  -webkit-box-flex: 1;
  -ms-flex: 1;
  height: 180px;
  width: 100%;
  border: 1px solid #ccc;
  background: #FF7F50;
  color: #fff;
  font-weight: 500 !important;
  position: relative;
  text-align: center;
}

@media(max-width: 768px) {
  .container-a {
    width: 100%;
  }
  .wrapper {
    grid-template-rows: auto;
    grid-template-columns: 1fr;
    grid-template-areas: "blog-container" "blog-sidebar";
  }
}

@media(max-width: 308px) {
  .wrapper .blog-container {
    padding-right: 0;
  }
  .blog-container .blog-cards {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
  .widgets {
    grid-template-columns: repeat(auto-fill, minmax(100%, 1fr));
  }
}
<section class="container-a" aria-label="blog-content">
  <div class="wrapper">
    <div class="blog-container">
      <span>Content</span>
      <hr>
      <div class="blog-cards">
        <div class="card">Card1</div>
        <div class="card">Card2</div>
        <div class="card">Card3</div>
        <div class="card">Card4</div>
        <div class="card">Card5</div>
      </div>
      <!--cards-->
    </div>
    <div class="blog-sidebar">
      <span>Sidebar</span>
      <hr>
      <div class="widgets">
        <div class="card">Card1</div>
        <div class="card">Card2</div>
      </div>
    </div>
  </div>
</section>

user_147768090
Related