background image not stretched properly

Question

The page can be viewed live here: http://tmstaging.cloudapp.net:88/en/my/news/sample-great-food-and-tasty-celebrities-with-astro-bella-new-show-taste-selebriti

The problem is on the first section of the two-column carousel. I've checked my css that if I removed this line of code:

  background-position: center center !important; 

From the class below :

  .promo-content .banner .slides > li

The background images would show properly. But I'm not sure if that's an effective solution. Also when resize to tablet sizes - the right column is shorter than the left column. How do I maintain for these two columns to be the same height?

Any help would be greatly appreciated

Answer 1

I think this is best for you.

.promo-content .banner .slides > li {
      min-height: 385px;
      background-position: center center !important;
      background-size: auto 100% !important;
     background-repeat: no-repeat !important; }