Removing padding/header space above Revolution Slider

Hi there,

I am making a website which will essentially be used as a Kiosk presentation on an iPad, using X Theme.
As such, I do not require any headers/footers, or any space where the header might be.
I have successfully removed the header, and added a revolution slider to the page.
However, there is now a gap between the rev slider and the very top of the page.
I have tried many bits of Customizer code to remove header/padding with no luck.
I have also tried removing padding from rev slider with different forum threads too.
Nothing seems to remove this white space.

The set up for the page is no headers/footers too.

I cannot ascertain if the space is from the rev slider or a ghost of the header.

Please see below for an image

The page in question can be found at www.simplysignskiosk.com/signs-gallery

Hi there,

I have checked your the page but I can’t seem to see the gap anymore.

Were you able to get this sorted?

Hi there,

Thanks for getting back to me.
By complete fluke, I was able to get rid of this gap on this particular gallery, but not on the other ones.
Any help greatly appreciated!

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

.page-template-template-blank-3-php .x-container.max.width.offset {
    margin-top: 0;
}

Hi there,

Thanks for trying, but sadly this code did not work.
Any more suggestions greatly welcomed.

Howdy @EarlySigns,

Thank you for writing in! The CSS provided by @thai should certainly work as I’ve reviewed your other pages and the selector used is indeed correct.

With CSS there are 2 issues that we have to handle: correctly targeting the appropriate element so we can style it and selector specificity to ensure that our applied styles don’t get overwritten by another style. In this case, the selector given is appropriate, and it should also have adequate specificity to remove the margin-top referenced, but since I’m not seeing the styles applied at all, it would seem that perhaps you do not have this CSS implemented in the correct place in your theme.

If you want to add custom CSS to your theme, you have 2 ways of doing that: using a child theme or the theme’s built-in global CSS editor.

Using a Child Theme

To go the child theme route, you’ll need to download, install, and setup a child theme. All of which is outlined here in detail:

Once you do that, you’ll need to locate the style.css file within that child theme and add your custom CSS there for it to show up on your website.

Using the Built-In Global CSS Editor

If you choose to use the theme’s built-in global CSS editor, you will need to launch the builder, then go to Theme Options using the hamburger in the top left corner of the screen, then find the CSS button in that same bar once that page loads. Any CSS you add here will show up sitewide for you.

Adding the CSS

As for the CSS, the styles already provided should work once they are in the appropriate spot. I might clean them up a little bit just to ensure they work depending on if you alter the appearance of that container slightly, so this CSS might be slightly more optimized for your use:

.page-template-template-blank-3-php .x-container.offset {
    margin-top: 0;
}

However, if you run into a specificity issue and your styles are not getting applied correctly, you may need to add !important to for good measure to force the styling:

.page-template-template-blank-3-php .x-container.offset {
    margin-top: 0 !important;
}

Hopefully this helps to point you in the right direction…cheers!

Glad you were able to figure it out :slight_smile: