Hi, I’ve been working in Vantage free with Page Builder on the Meta Slider for several hours. I see a variety of forums on this and have attempted multiple settings to get my images to display correctly. My 1080 x 420 image looks zoomed in on no matter what my settings are. I’ve used “stretch”, I’ve turned it of. I’ve used the default slider and the Vantage flex. I’ve turned the slider size down to 500 pixels. I’ve made my image smaller than 1080 and sized it up to 1920 with the same proportions and it always places the same enlarged size regardless of what I do. (For example, I have a coffee cup with a background, but it zooms in on the lip of the cup and 75% of the image is out of view. When I resize the browser manually to view the responsive function then the image sizes down to where I can see it all at the best resolution, but when my browser is full screen the image gets magnified. I can’t seem to find a resolution for this. I’ve had great success wit Vantage to this point after having tested numerous other themes. Any new help on this issue would be greatly appreciated.
Vantage theme – Meta Slider image problems
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].
This is our free support forum. Replies can take several days. If you need fast email support, please purchase a SiteOrigin Premium license.
Hi [email protected]
If you’re still looking into this, try the following applied to a Custom CSS plugin like Simple Custom CSS or Jetpack Custom CSS:
/* Vantage Theme, remove max width/layer centering. Usage: Copy and paste this code into Appearance > Custom CSS or your own Custom CSS module. */ body.responsive.layout-full #page-wrapper .metaslider .full-container, .layout-full #page-wrapper .metaslider .full-container { max-width: none; }Hi Andrew, thanks for the followup. That seems to have worked! Image size matches my slider size and displays as it should. Will these custom css changes remain for theme updates? I may need to start a new thread on updates, theme edits.
I appreciate your help.
Matt
Super, glad that helped.
Yes, stored under Appearance > Custom CSS (Vantage Premium) OR in your own Custom CSS plugin, additions like this are safe.
If you edit any theme files at a code level those edited files must be copied (not cut) and inserted into a child theme:
https://codex.wordpress.org/Child_Themes
Thanks again. I’m setting the child theme files up now. I will add a new thread because I have a couple questions.
Hi Andrew, one little hiccup I noticed on the slider. Upon loading, each slide jumps like a pixel up and to the left. At the top corners I see it overlapping my menu for 1 second before dropping back in place. It does this on each rotation. Thoughts on the cause?
Thanks again!
Not sure what might be causing that. Perhaps try switching in Meta Slider from Vantage (Flex) to the default template and see if there is any change.
Strange, yes. the default didn’t fix. I had a similar problem on squarespace, but solved it with uploaded image size. In this case the image size matches the slider size. If you come up with other ideas let me know. I will keep moving on with the site and see if I can solve or work around it.
Thanks again.
Hello, i dont know if its a good idea to answer in here, but i have the exact same problem,images are 1080 x 420pc, and the slider its setup alike; problem is, in my 1920 x 1080p screen, the back image looks zoomed con cropped, but if i reduce the size of the browser window the slider looks perfect…
Applied the custom CSS that Andrew provide us and seems to work, but now the slider have loose the proportion and its showed at 720px height instead of 420px.
Link to my website already on PM… greetins!
Already solved!
Problem was, the image was 1080px width, and the site was triying to mantain the proportion so the image ended with 720 px instead of the original 420px…. i just upload a bigger photo (1920 x 420) and now its working.
Super :) Glad to hear you were able to resolve. Thanks for sharing.
All the best.
I am really new at this and I need help with the pics in my slider are zoomed in and I don’t know how to fix it. I understand about the copy past into my ccs but its not working because I am doing something wrong. Please someone help me.
Is there a way to adjust this CSS so that the scaling of the slide image works normally, but only the layering has a max-width: none? I think the way the slider handles resizing the image is correct, but the way it handles text in a layer seems incorrect.
Layer text seems to have a hard limit of 1080px and if you create a large width slider, for example 2048px and then try to add centered text in a layer, it is shifted to the right when viewed at sizes larger than 1080px.
Using the code posted at the beginning of this thread does fix this, but it also changes how the background image stretches and adjusts to larger widths.
I had exactly the same problem and solved it by going to the my front page page and deselecting “Stretch Page Meta Slider” next to the slider and then going to my slider and selecting “Stretch 100% wide output” under Advance Settings.