Support » Theme: Customizr » Reducing gap between header and slider on website

  • Hi I have a few questions I really would like help with.

    Question 1: I am trying to work out how to reduce the gap between them. I was look at the topic on reducing the gap on mobile devices but dont know how to do it on the website.

    I tried to use this but it moves my slider background up rather that reducing the gap between. The coursel code moves everything up including the three buttoms. I must be doing something wrong.

    my website is

    Question 2: I tried to reduce the gap between the slider and the 3 buttons but on a mobile this comes up as more squished. I think i might need to use the @media for this but not sure how to do this.

    Question 3. My logo appears on the website on a pc but doesn’t on a mobile? Anyway I can get a code/snippet to make it appear or at least words?

    Question 4. How do I change the grey colour of the whole role near the widges? I saw the snippet to change the colour but that only does the widget area and the side is still grey.

Viewing 7 replies - 1 through 7 (of 7 total)
  • 1. This is screwing your large viewport view:

    .marketing {
      margin-top: -80px;

    2. You do need to use @media. Try this Snippet

    3. Have tried with Resizer and don’t see anything wrong? What browser? (Resizer will help with your @media coding)

    4. Try this:

    footer#footer {
      background: none repeat scroll 0 0 #FF0000;

    Change red to what you need

    Hi Rdell

    Thanks for your assistance. very helpfuly!

    Q4 – sorted 🙂 i have a nice green now.

    q1 – i have dropped it to -40. The main thing is the gap between the top navigation and the slider is a bit much. I would like it to be at least half as it takes up a lot of space especially on the phone.

    q3- seems to work on the ipad/ipod. For some reason on the andriod the logo is not loading. Btw how does resizer work? I added it to book mark but when i go to load the website it goes out of resizer?

    q2 – i copy and pasted the whole snippet into the custom css is that right?

    1. Home page looking good now with -40px
    2/3. Add the code to the end of your Child Theme style.css. It is an example of different @media blocks for different view ports. To be perfect, you need to check them all. iPad Portrait v iPad Landscape v Android all need handling, potentially differently. Resizer is an emulator, so it isn’t showing any problem with Android sizing. I don’t have an Android phone to check.
    Resizer: add it to your bookmark bar. Go to your webpage. Select Resizer bookmark. A black menubar drops down with various viewport sizes to test.
    4. Great!

    Cheers for that I will have do the child theme once i learn how to do it properly.

    For some reason on android the logo doesn’t come up at all on the android phone? Is there any reason why this theme wouldn’t load the logoe on android?

    Please note I did check resizer and it works perfectly. It also works perfectly on the Ipad/iphone.

    Is there a code that would for example load writing if the logo wasn’t able to show?

    Q 1 – Still not able to reduce the gap between the top of the page nav and the slider. Any snippets for that? i.e. between the logo/nav bar and the slider.

    This should work:

    /*make slider stick to navbar for all screen sizes*/
    .attachment-slider-full {vertical-align: top;}


    I did that but what it did was pull the background of the slider up which is great but then the rest of the slider doesnt go up with it. Any ideas on how to solvef it?

    @electricfeet – thank you: that’s a brilliant snippet. Seems not to work on my framed sliders though so I need to find the right name of that element. But it improves my full-width slider a lot.

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Reducing gap between header and slider on website’ is closed to new replies.