This topic has 18 replies, 3 voices, and was last updated 8 years by 
-
-
In redesigning our website, I have now set the site’s width to “wide” (vs. boxed) in the theme settings. But now the images that we have in Slider Revolution are somewhat distorted. The original size of the images (when the site was set to boxed) was 1440 x660. Some of those images are still up now on the site’s home page (freedomleaf.com). But now with the site set to “wide” these images look stretched.
The first image in the slider (the one with our logo and the guy’s face, and the red top bar) was created for the new wide site and set to be 1900px wide…thinking that would look better with the now full wide site. But it looks somewhat distorted as well.
Additionally, the slides that were created for when the site was boxed and were created at 1440px wide, look good on a mobile phone screen now, but look stretched on the large desktop. The one slide (the first one) created for the wide set site at 1900px wide, looks OK (not great) on the large desktop, but looks off on mobile screens.
I set the width setting in the slide layout edit section (4.) of Slider Revolution to: 1900×568 and set the width from “Auto” to “Full-Width”
Images seem to still be distorted. So these are my questions:
1. What should I tell our graphic artist the ideal size for these background images for the Slider Revolution slides on our home page should be.? I can have him do any size….I’m just not sure what size to tell him now that the site is set to “wide”
2. What should the Slide Layout settings be set to in Slider Revolution ideally? Auto? Full Width? and what should the desktop dimensions be? And the mobile settings?
Thanks
Hello, the best would be to first create the slider size that you want to use, and then create an image with the same size.
Usually i choose Auto. And depending on the image height i modify the slider 🙂Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
OK…I’ll change the size back to “Auto” in the settings, but my question still is what is the ideal size for this area for the sliders, with the site now set at “Wide.” I can have our graphic artist create the sliders in any size…I just have to tell him what size.
I noticed that at, for example, dopemagazine.com (not using Kleo, but they are using a slider plugin) that their sliders are full width, not distorted but are only around 1253px wide.
Are you saying this if I have our guy do the slider images at say, 1250px wide (for example) and have the settings at “Auto”, that it’ll look good…on desktop and mobile?
Thanks Laura
The sliders still do not look good in mobile. I set the width in the settings back to “Auto” and uploaded a few news sliders that are 1900px wide. They look OK on a desktop, but not good at all on mobile.
Hello, you could disable slider on mobile 🙂
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
OK…done (I did it right when you sent this, but made the mistake of replying to the notification email of your response)
Now for some reason the sliders are looking even more cut off and all I have done in relation to this issue since posting this ticket is disable slider on mobile (not saying that’s what I think caused the new issue, just saying that’s all I’ve done….so not sure why now they look worse). See attached screenshots.
They didn’t look right before, but at least they were not getting cut-off like they are now.
Hello, that is just related to the slider height. Make it bigger to show the image
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
make what bigger? The slider image itself? Or the settings? Because these sliders fit in there before and were not cut off like this. Can you tell me what the ideal slider size should be, or what the settings should be?
Hello, it depends on the image, try to change the slider height at the slider settings if it doesnt resolve it, let me know.
Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
I don’t think that’s it, as the attached slider image, for example, is 1900×500…and the image size setting for these sliders in Slider Revolution is 1900×568. Plus it’s set to “Auto” so I would think it would auto size. But if not, nonetheless, the height setting is 568.
The strange thing is that I changed the setting to 668, as you suggested making it higher, looked at the page and as expected the sliders fit, but I don’t want the slider area that high, and since the most of new slider images (like the one attached) are only 500px high I figure they should fit. So I changed the slider height setting back to what it was, 568px high, and when I went back to the site, it all looked good again. But then I scrolled down the page, then back up the page. After getting to the top of the page again, the sliders were back to being cut-off.
I think it’s something with the sticky menu. Try it in Chrome. If you load the site, the sliders look fine….but then once you scroll down that back up, the top is getting cut off my the header.
Additionally, with the sticky menu, and I think this is related, but in Chrome when I scroll down the page in a post, then scroll back up, the title of the post disappears. Happens every time in Chrome.
Hello, will assign the ticket to a higher support level who can help and advise you in your query.
Thanks! ?Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionLaura Solanes - Graphic Designer and Web Designer
Please be patient as I try to answer each topic as fast as i can.
If you like the theme or the support you've received please consider leaving us a review on Themeforest!
Always happy to help you 🙂
Hi,
That white space between the slider and the menu it’s generated by the ubermenu and with this CSS you can fix that
COPY CODE.ubermenu.ubermenu-main { padding: 0 !important; margin: 0 !important; } .header-scrolled .ubermenu.ubermenu-main { padding: inherit !important; margin: inherit !important; }For the slider problem, i think you should set a min height 600 or your desired value also, make sure you have selected standard type of slider
———————
Official revolution slider documentation : https://www.themepunch.com/revslider-doc/slider-revolution-documentation/
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionRadu,
Thanks for getting back to me. I applied the custom CSS you provided, and although I wasn’t asking to get rid of that white bar in my ticket here, I applied the CSS and am glad it got rid of that small white bar. However, that’s not the issue. The issue, which still exists after applying the CSS, is that when you scroll down the page and let the menu bar go sticky, then scroll back up, it cuts off the top of the slider, but only seems to happen in Chrome for some reason.
I also applied the settings in Slider Revolution that you suggested and still having same issue.
Thanks Radu,
Chris
Also, btw, we hired Laura to do some custom work in the header area, and she’s still working on it, so maybe it’s that? But not sure? Just thought I would mention it, if it helps.
Hi,
I saw in your child theme that you have a value that limits the header height but with this property the slider on scroll down then top will looks ok
COPY CODE.header-two-rows #header .sticky-wrapper { height: 190px !important; }Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solutionGreat
Have a nice week
Cheers
R.Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution
The forum ‘Plugins questions’ is closed to new topics and replies.
