Slider controls need padding, but how?

Hi Guys,

I’ve made a lot of progress on my project thanks to stellar help here at SitePoint (thank you!).

Hopefully one of the last things that I can’t figure out is getting some padding on the slider < and > controls.

There are two sliders, I only want to affect the bottom one “logo slider” and not the text slider.

I’m trying to add about 25px top padding can’t find a selector to do it.

Any help?


You will need to show your updated page so we can see the code you are now using:)

In your other thread you had html like this:

  <div class="q-control"> 
        <p><span class="q-prev2"></span><span class="q-next2"></span></p>

The arrows were inserted by the js as icon fonts inside the spans so if you target those spans you can add some padding right and left as required.

I’m not sure what you mean by padding though and do you simply mean you want to move the arrows farther apart?

Either way we will need to see more code to give more pertinent advice.:slight_smile:

Paul - my bad - I forgot the link to the code. - CSS - slider CSS

Yeah there was a small js/CSS change to solve the duplicate <>.

I’m talking about the space between the top of the arrows and bottom of the logo.



You can add padding like this:

#logo .q-control{padding-top:25px;}

If you don’t want the box to increase in size then you could use relative positioning instead.

#logo .q-control{position:relative;top:25px}

Thanks Paul!

Looks simple when it’s right in front of me, but I just couldn’t figure it out. I used relative and it works nicely.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.