* {
    margin: 0;
    padding: 0;
  }
   
  /* Default Design */
  .gfg-div{
   
    /* To make all elements center
    display: flex;
    justify-content: center;
    align-items: center;  */
   
    /* Default Styling */
    height: 400px;
  }


/* For Desktop View */
@media screen and (min-width: 1024px) {
    .gfg-div {
  }
}
 
/* For Tablet View */
@media screen and (min-device-width: 768px)
and (max-device-width: 1024px) {
  .gfg-div {
    height: 400px;
   
  }
}
 
/* For Mobile Portrait View */
@media screen and (max-device-width: 480px)
and (orientation: portrait) {
  .gfg-div {
  
    height: 200px;
  }
}
 
/* For Mobile Landscape View */
@media screen and (max-device-width: 640px)
and (orientation: landscape) {
  .gfg-div {
    height: 200px;
  }
}
 
/* For Mobile Phones Portrait or Landscape View */
@media screen and (max-device-width: 640px) {
  .gfg-div {
    height: 200px;
  }
}
 
/* For iPhone 4 Portrait or Landscape View */
@media screen and (min-device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
  .gfg-div {
    height: 200px;
  }
}
 
/* For iPhone 5 Portrait or Landscape View */
@media (device-height: 568px) and (device-width: 320px)
and (-webkit-min-device-pixel-ratio: 2) {
  .gfg-div {
    height: 200px;
  }
}
 
/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 667px) and (min-device-width: 375px)
and (-webkit-min-device-pixel-ratio: 3) {
  .gfg-div {
    height: 200px;
  }
}