Home>Support>Meta Slider stretch cropping images

Meta Slider stretch cropping images

By Rachel Bolton, 9 years ago. Last reply by Daniel, 9 years ago.

Hello,

I am using Vantage Premium with WPML to create the site in both Swedish and English. I have 2 different homepage sliders,

I followed the instructions on https://siteorigin.com/vantage-documentation/getting-started/slider to create the homepage sliders. Both have 3 slides with dimensions of 1080×300. In the Vantage theme settings, I’ve checked the box for ‘stretch home slider’ to make the slides the width of the page.

When I view the site on smaller devices (i.e. small laptop, tablets, phones, etc.) the sliders look great and are the size I expect them to be.

If I view the site on a larger device (desktop computer or larger laptop) the slides stretch width-wise to fit the screen. However, they don’t also stretch height-wise past what I assume is the fixed height of 300px. Instead, it crops the bottom of the image. On 2 of the 3 slides, this means that the text in the image is cut off at the bottom, and the design doesn’t allow for the text to be moved up.

Is there a way to override this so that the image also stretches height wise so that it both retains its aspect ratio and is fully visible?

Thanks,
Rachel

URL: http://www.gctools.se

This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.

  1. 9 years, 6 months ago Rachel Bolton

    Also, in my quest to try to resolve this on my own, I deleted the sliders and then recreated them with fresh images. I was able to set the English language homepage with the English slider, but cannot seem to find how I set the Swedish homepage slider to display on the Swedish page. Could you please point me in the right direction? Thanks!

  2. 9 years, 5 months ago Daniel
    Hi, I Work Here

    Hi Rachelamanda

    You can fix this with some custom CSS. If you navigate to Appearance > Custom CSS, you’ll get our custom CSS editor. Just add the following code.

    body.responsive.layout-full #page-wrapper .metaslider .full-container,
.layout-full #page-wrapper .metaslider .full-container {
max-width: none;
}

    Let me know if it works for you.

    For your other issue kindly open a new thread for each question. This helps us ensure we keep track of each issue individually and ensure all our customer queries have been looked at as required.

    Thank you for your patience and understanding.

  3. 9 years, 5 months ago Rachel Bolton

    Thanks. That worked perfectly!

  4. 9 years, 5 months ago Daniel
    Hi, I Work Here

    Great :-)

    I will jump to the other issue in the other thread

    Cheers

Replies on this thread are closed. Please create a new thread if you have a question, or purchase a SiteOrigin Premium license if you need one-on-one email support.

Get The Most Out of SiteOrigin with SiteOrigin Premium

Find Out More