• 0
Sign in to follow this  
Followers 0

remove white margin around the header banner

Question

Posted · Report post

How can I remove the white margin around the banner top and bottom? I checked in forum and saw this below but it didnt work. #branding .content-pad{padding-top:0px;}

Share this post


Link to post
Share on other sites

23 answers to this question

  • 0

Posted · Report post

Hi I'm not sure, but you can try [code]#banners .banner-area { margin:0px; }[/code] I hope you serve

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

In the code you pasted you may want to try adding [b]padding-bottom: 0px;[/b] to it in addition to [b]margin: 0px;[/b]
1 person likes this

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I still have some white margin on top and bottom. here's what I have in code. any suggestions. #banners .banner-area { margin:0px;} #banners .banner-area { padding-bottom: 0px;}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You can try: [code] .content-pad {padding: 0px;}[/code] to see if you like. I??m a newbie trying to learn ... I don??t quite understand you need, my apologies.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I got rid of the top margin completely. The bottom margin got better but there's still some white left. Id like it to sit on top of it. any suggestions? thanks for your help

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi again @steelmayhem For the bottom margin try: [code].content-pad { padding-bottom:0px; }[/code] I hope you serve

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Try @batman's solution above and let us know if it works.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I tried but no luck. any suggestions?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hey there, Try [code].content-pad { margin-top: -2px; margin-bottom:-11px; }[/code] However, your banner width is not equal to the nav width.. make sure you increase it, it will look better ;)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@stefan, I have increased my banner width but its not increasing on the website. is there something in the settings I can do to adjust the length? Also, the bottom margin helped a little bit but there's still space. Ive tried increasnig the number but no luck either.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

So I see it correctly now, there is no white space under the banner (above the nav): http://screencast.com/t/8ZtSqMIRq6 However, there still is 2px of space above the banner, so make sure you add the margin-top: -2px; as well. About the banner, try increasing only its width, not also the height. If you adjust both of them, it will have the same ratio and will be display the same I think. Not sure about it though! You could also alter the width with custom CSS but it will look stretched...

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@stefan yes, I already tried just the length adjustment but no go. it was 1075 originally then increased the length to 1085 and it was the exact same length appearance. any suggestions for custom code? also, i took 2 screen shots of firefox and IE to show the white space..whats going on?? i cleaned history just in case. [url]http://reviewmywebsiteforconversion.com/wp-content/uploads/2012/06/screen_shot_firefox.png[/url] [url]http://reviewmywebsiteforconversion.com/wp-content/uploads/2012/06/screen_shot_IE.png[/url]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Ah, IE and Firefox... I will check them out but cannot do it right now, I'm on a Mac without FF installed. Meanwhile, this should do the trick for the bg image. It works fine in Chrome :) [code]body .content img { max-width: 1070px; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

yes, the banner is fixed! thanks..just let me know when you can about the different browser problems showing white space. thanks for your help!

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Sure thing, I'll test them and get back at you tomorrow! Glad the banner is solved :) In the meantime, if anyone else has an idea or some input feel free to post.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@stefan or anyone else, any luck with the latest issue on different browsers seeing white margin space below the header banner? IE and firefox see it but safari doesnt.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm not sure about the browser thing other than each browser interprets differently, but you have an error on your site that I wanted you to be aware of: [code]

Hi, I’m Mark and I invite you to get started with a FREE No-Obligation website analysis. Ill review your website for key elements and aesthetics and make recommendations to help increase your website conversion rate.

[/code] Missing the closing 'span'. ;)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@smple_mama thanks! I still need help removing the white margin space below banner. its showing up in IE and firefox but not safari.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

You may want to try the browser-specific CSS plugin in the PageLines store to add CSS that will adjust the white margin space in specifically IE.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

@catrina, I have it installed but Im lost as to what to do next. appreciate your guidance. thanks

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Here is the documentation on Browser Specific CSS: http://pagelines.com/tracking/wiki/Browserspecificcss%3AMainPage

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi, I checked the doc link but still confused. Am I suppose to insert this below: for each one of the devices? if so, its not doing anything to help with the spacing below banner. if its suppose to do this automatically without inserting any code, its not doing anything either.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

No, you'll need to change the class so that it's a CSS selector, but before you do that, it's best to become more familiar with basic CSS. This documentation is very helpful: http://www.pagelines.com/wiki/Custom_CSS

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
Sign in to follow this  
Followers 0