• 0
Sign in to follow this  
Followers 0

Remove feature image white edges

Question

Posted · Report post

Hello I have made some customizations to the feature area; it now has less height and fits all the way to the sides of the page, except there is a very fine white border remaining which is not visible on the png file, can anyone help with this? The other customizations I wish to make are: - remove the padding between the main nav bar & feature image (so the nav bar sits directly under the feature image) and bring the main nav bar all the way to the edge of the page - remove the space created by the home page "content area". I want to add a google map here on rhs and 'call to action' contact form on lhs (do I need to remove this empty space to do that or put it in this empty space?) URL: http://byronbaysmashrepairs.com.au/test/ Thanks in advance!

Share this post


Link to post
Share on other sites

10 answers to this question

  • 0

Posted · Report post

You should download FireBug (http://www.getfirebug.com) to help you determine which CSS changes to make on your site. You will find it to be a very useful tool for CSS customizations. I don't see a white border, not even a faint one. Maybe I'm just missing it? To make the changes you're wanting, you can add the following CSS to your custom CSS code: [code]#feature { margin: 0 !important; } #page, #dynamic-content { min-height: 0; }[/code]

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Jenny Thank you, that helped to get the nav bar snuggled right up against the feature image...now I would like it to go all the way to the left edge of the page... I have been using firebug to do the changes made so far but some things are still way over my head! Maybe its my browser, but there's definitely still a tiny amount of white showing on lhs & rhs of feature image.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello Jenny One more thing.... every page except for the home page has the feature image misaligned to the left

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I only see white space on the right side of the feature image when I view it Firefox. The image needs to be wider to fill the extra white space.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

This should get your nav moved all the way to the left: [code]#primary-nav ul.main-nav { margin-left: -10px; }[/code] To make the image fit, you need to make the image bigger. Two things: 1. The reason you're seeing a faint white line is because you're putting a 959px image into a 960px area. 2. The reason your page has a different width depending upon the page is because that's how you have it setup (with custom CSS). To fix it, use this in your custom CSS: [code].fixed_width #page, .fixed_width #footer, .canvas #page-canvas { width: 960px; }[/code] Alternatively, instead of fixing your image to make it 960px, you should be able to just change the code above to width: 959px; and that will hopefully solve both issues at once. :) (Note: if you do this, you will need to remove #feature_slider {margin-left: -10px;} from your custom CSS).

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello simple_mama I'm still having issues with this... I checked the size using pixel grabber and it says it 980 px, so I made the feature image bigger in photoshop. This is my custom code so far: body{} #feature-area, .feature-wrap, #feature_slider .fmedia, #feature_slider .fcontent, #feature_slider .text-bottom .fmedia .dcol-pad, #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .dcol-pad { height: 231px; } #feature-footer {display:none;} #feature_slider{width:980px;} #feature { margin: 0 !important; } #page, #dynamic-content { min-height: 0; } #boxes .dcol-pad { background: none repeat scroll 0 0 #F7F7F7; } The web url is http://byronbaysmashrepairs.com.au/test/ You can see the image is cut off inside this area as its not trimmed that close to the logo and text in photoshop

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I've got it working better, but its still like a patch-up on what it should be, this is evident by the fact that the actual image is not centered correctly; the logo & text on the jpeg is the same distance from left edge as text is on right edge, but that's not the case once uploaded.... and there's a strip of darker black on rhs of image showing how far out the image is from being centered (I presume). Here is my code so far... body{} #feature-area, .feature-wrap, #feature_slider .fmedia, #feature_slider .fcontent, #feature_slider .text-bottom .fmedia .dcol-pad, #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .dcol-pad { height: 231px; } #feature-footer {display:none;} #feature_slider{width:980px;margin-left: -10px;} #feature { margin: 0 !important; } #page, #dynamic-content { min-height: 0; } #boxes .dcol-pad { background: none repeat scroll 0 0 #F7F7F7; } #primary-nav ul.main-nav { margin-left: -10px; } The page width is 960px and I have remade the image to be 962px, but obviously that's still not quite the right solution

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hello simple_mama, In response to your comment below , I tried the code below that and now the pages other than the home page seem ok, but the home page is not: 2. The reason your page has a different width depending upon the page is because that's how you have it setup (with custom CSS). To fix it, use this in your custom CSS: .fixed_width #page, .fixed_width #footer, .canvas #page-canvas { width: 960px; } Alternatively, instead of fixing your image to make it 960px, you should be able to just change the code above to width: 959px; and that will hopefully solve both issues at once. :) (Note: if you do this, you will need to remove #feature_slider {margin-left: -10px;} from your custom CSS). My Code: body{} #feature-area, .feature-wrap, #feature_slider .fmedia, #feature_slider .fcontent, #feature_slider .text-bottom .fmedia .dcol-pad, #feature_slider .text-bottom .feature-pad, #feature_slider .text-none .fmedia .dcol-pad { height: 231px; } #feature-footer {display:none;} #feature_slider{width:980px;} #feature { margin: 0 !important; } #page, #dynamic-content { min-height: 0; } #boxes .dcol-pad { background: none repeat scroll 0 0 #F7F7F7; } #primary-nav ul.main-nav { margin-left: -10px; } .fixed_width #page, .fixed_width #footer, .canvas #page-canvas { width: 960px; }

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I'm confused as to what you still need fixed but here are a couple things I noticed. Your feature image is coded with: [code]#feature_slider { width: 980px; }[/code] But your site width is smaller than that. That's why it is showing larger. You need to correct the width in your PageLines settings. Remove this: [code]#primary-nav ul.main-nav { margin-left: -10px; }[/code] ..to fix your navigation bar. If there's anything else, or if I misread your questions, please let us know what you need. :)

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

that worked...thank you :D

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