Resize Rev Slider Hero Header to fit to Specific page

[fantasy_5]

Hi!

I have been trying to wrap my head around how to adjust a hero header rev slider to make it fit a specific page without overflow or have white space at the top.

I used code from a previous post, but it didn’t help much. My website isn’t live just yet. BY THE WAY, I am using the Integrity stack. The red arrows in the image point to the top and corners of the page. I did go to the introduction section where the slide is added and reduced top padding from 45px to 0px.

[ruenel]

Hello @fantasy_5,

Thanks for writing in! Please edit your slider and make sure that you have set the Layout Sizing to auto.

After making the site changes, since you are using SiteGround, please disable the SuperCacher in your hosting panel. The SuperCacher is developed by SiteGround exclusively for their customers. It increases the number of hits a site can handle and boosts the website loading speed. The SuperCacher includes 4 different caching options for maximum optimization of your websites. You can access the tool by clicking on the SuperCacher icon in your cPanel.

For more information about this, please check it out here: https://www.siteground.com/tutorials/supercacher/supercacher_intro.htm

And also, it appears that you are using CloudFlare. You may need to purge your site cache asl well before testing the site again.

Hope this helps. Kindly let us know how it goes.

[fantasy_5]

Hi, Ruenel

Before contacting you guys I did adjust the slider. I followed your advice and still no change on my end. I cleared the browser, supercacher, and Cloudflare cache. Next, I ticked supercacher setting off. now, this particular page is set up with a custom background setting that I would like to keep. Do you see a difference on your end? I am using chrome browser.

[prakash_s]

Hello @fantasy_5,

To get rid of the white space from the top. Please follow these stop.

1. Go to Dashboard
2. Go to pages —>Click on the Settings Icon
3. Go to Page settings -->Scroll down —>Slider Settings: Below Masthead
4. Now set the slider from here.

Please have a look at the given screenshot below

Hope it helps
Thanks

[fantasy_5]

I am using cornerstone to edit this particular page. When I do below masthead and have classic revolution slider set through cornerstone it creates double sliders. Also, setting it through the masthead covers the custom background which is not what I want. Both ways the slider is still not responsive although it is set to auto. There is still overflow to the left and right and it is still not positioned at the top of the page as I mentioned by example with my first attchment.

[ruenel]

Hello @fantasy_5,

Do you have any custom CSS or custom JS that could be making your slider container fullwidth? I have imported your slider and added in one of my testing servers and it is working fine.

See the secure note for comparison.

I would recommend that you deactivate your plugin one by one to find out which one may have caused it. And also kindly check your custom JS/CSS. If possible, kindly create a staging area so we can investigate thoroughly;y without disrupting your live site.

Best Regards.