Resizing window cause layout to look odd

Hey navindesigns,

The image aspect ratio does not really make it easy or possible to have it always perfectly aligned with text and there is too much text for the image with such height.

The code below makes it more or less the same, but I had to scale the image and part of it is cut off intentionally.
Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css

@media only screen and (max-width: 1190px) {
  .avia-image-container.avia-align-center.avia-builder-el-no-sibling {
    overflow: hidden;
  }

  .avia-image-container.avia-align-center.avia-builder-el-no-sibling .avia_image {
    width: 120%;
    max-width: initial !important;
  }
}


@media only screen and (min-width: 990px) and (max-width: 1080px) {
  .avia-image-container.avia-align-center.avia-builder-el-no-sibling {
    overflow: hidden;
  }

  .avia-image-container.avia-align-center.avia-builder-el-no-sibling .avia_image {
    width: 150%;
    max-width: initial !important;
  }
}
@media only screen and (min-width: 768px) and (max-width: 990px) {
  .avia-image-container.avia-align-center.avia-builder-el-no-sibling {
    overflow: hidden;
  }

  .avia-image-container.avia-align-center.avia-builder-el-no-sibling .avia_image {
    width: 170%;
    max-width: initial !important;
  }
}

If you need further assistance please let us know.

Best regards,
Victoria