Notice: This thread is over two years old; the information may be outdated. Please consider creating a new thread if you require free support. If you have an active SiteOrigin Premium license, you can email our premium support desk at [email protected].
Hi there, firstly I’d like to say I love your page builder plug in, and am also enjoying using the vantage theme.
My one issue is problem with how the metaslider shows images on a widescreen…
I am using the free metaslider plug in, and have resized my images in photoshop to 1080 by 420. They look good on my 13 inch laptop and my mobile phone but on my wider screen desktop computer the images get cropped so don’t show fully.
I’ve tried various things, including disabling the image crop in the advanced meta slider settings, using default instead of vantage flex, using the code I found in another thread…
body.responsive.layout-full #page-wrapper .metaslider .full-container,
.layout-full #page-wrapper .metaslider .full-container {
max-width: none;
}Whilst that improved the image it meant the slider images take up the whole screen and you can’t see the vantage headline etc unless you know to scroll down. I don’t know a lot about coding….
If I can I would love the home page to look as it is now, but be able to see the images without the cropping on a widescreen.. I hope this makes sense :)
Hi k600
Thanks for your support.
As you’ve hinted above, there isn’t really a solution here. You can either have the slider at fixed height by removing the Custom CSS snippet you added. Unfortunately to do this some of your image is cut off. Alternatively, by adding that Custom CSS snippet in, you remove the max-height constraint, and your image will display without any cropping. 100% width is hard to get right. Another option would be to redo your images at 1905px and remove the Custom CSS. That would take care of the 23″ monitor I’m on now.
Hi, Thanks for your quick response.
I have ended up not stretching the slider, but changing the slider background colour after finding some code in another thread to match the page background. All in all I am happy with how that looks.
Thanks again
Katrina
Super, glad to hear you made some progress there.
If anyone else is looking for that, you can set the Meta Slider background color by inserting the following under Appearance > Custom CSS (Vantage Premium):
/* Meta Slider Background Color */ #main-slider { background: #fff; }Edit #fff as required.