@media only screen and (max-width:767px) {
    body { background: none; padding-bottom: 0px; }
    .postcode_wrap { height: auto; background: url(../images/index_page_bg_2.jpg) left top repeat-y !important; background-size: 100% 100% !important; padding-bottom: 0%; }
    .post-code-right-block, .post-code-left-block { height: auto !important; }
    .bistro_logo { padding-top: 40px !important; }
    .bistro_logo img { max-width: 100%; }
    .postcodeform { top: 10% !important; width: 100%; }
    .postcodeform input.pcinput { padding: 0; margin: 0; font-size: 1em !important; }
    .post-code-right-block img { max-width: 100%; }
    .postcode-right-block-content, .postcode-left-block-content { padding-top: 20px; }
    .post-code-app-icons-wrapper > .first img { height: 60px; width: 125px; float: right; }
    .post-code-app-icons-wrapper > .second img { height: 35px; width: 125px; float: right; }
    #wh-widget-send-button.wh-widget-left { left: 10px !important; bottom: -10px !important; }
    .appBtnRow { margin: 28px 15px 0px; text-align: center; }
    .resim { width: 332px !important; }

this causes the bottom white area problem. How can I fix this?

bottom white problem

CodePudding user response：

You have to either make sure that your image is the right dimension for the device format you are targeting and render the right image in function of the device format.

OR You can allow the image to stretch (not advised) to fit all format

Or

You will have to choose where the image is going to be centered when resizing while keep it's ratio, if your image is 1920*1080 then on mobile format you will only see half of it or so, this is where you have to choose which part of the image you want to show.

  body, html {
  height: 100%;
  margin: 0;
  }
  
  
.postcode-rightblock img {
  /* Set a specific height */
  height: 100%;

  /* Position and center the image to scale nicely on all screens */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  position: relative;
}