Jump to content
mindfulbaby

How add space in between Banners within a Banner Set

Recommended Posts

mindfulbaby

I've found a number of posts in the forum on how to modify the spacing between the Banner section and other sections (and also footer or header), but would I would like to do is create just a bit more space between the Banners within one Banner Set (so there is a page where I have 3 banners in one set, and I'm looking to add slightly more space between Banners 1 and 2, and 2 and 3). I'm looking to keep the text still centered to the left/right of the image, just as is. I'm guessing this is perhaps done through padding, but I'm not sure if I do padding for a full Banner, or just the image?

Share this post


Link to post
Share on other sites
catrina

Yes, you are right. you must work with padding and you do it for a full banner, not just the image, because the full banner consists of the text content, too.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
mindfulbaby

I unfortunately don't know any programming (I am good and cutting and pasting and editing small things, though!). Would you happen to know the padding CSS required to modify? I have read the tutorials you have pointed to in another forum post, but couldn't figure out how to get it to apply (increase the space between) the different Banners within the Banner set. I think it might be called a container? So I need to change code kind of like this: .banner container-pad {bottom: 10px} Is that along the right lines?

Share this post


Link to post
Share on other sites
Rob

You're on the right track. But where on your site are the banners? I could look for you.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
catrina

This CSS should add space between banners:

div.banner-area {margin-bottom: 20px;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
mindfulbaby

I've tried that out, but it doesn't seem to change the spacing (have tried larger px numbers also). I've added it at the bottom of my Custom Code section. Anything that I might be missing? Thanks again-

Share this post


Link to post
Share on other sites
catrina

When you say vertical space, can you please specify exactly what you mean by that? I may have misunderstood.


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
mindfulbaby

Basically (if I understand correctly), a Banner set is made up of multiple Banners, and each Banner can have a text and image component. I have 3 banners that make up my set, and each Banner has text and an image to the right or left of the text. What I would like to do is add additional space in between each Banner (so add space in between Banner 1 and 2, and Banner 2 and 3] So the page looks like [nav up here] [banner1 text ..... banner 1 image] =want to add more space here= [banner2 image....banner 2 text] =want to add more space here= [banner3 text....banner3 image] [footer down here]

Share this post


Link to post
Share on other sites
batman

Hi mindfulbaby You can try add in PageLines > Site Options > Custom Code > CSS Rules

div.banner-area { margin-bottom: 50px !important;}

You can change #px as you like


Life is too short to remove USB safely ...

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×