• 0
Sign in to follow this  
Followers 0

Image alignment issues


Question

Posted · Report post

Hi,

 

I have read various posts around this subject but they

don't seem to answer my quandry.

 

I have an image in a column, placed there by mediabox. 

I want the image (logo) to be top left so that it aligns

horizontally with the column on the right hand side.

 

How do I get rid of the white space around the image

so it aligns with the navbar on the left.

 

[attachment=1691:Screen Shot 2013-10-24 at 17.19.29.png] 

 

Thanks in advance.

Share this post


Link to post
Share on other sites

13 answers to this question

  • 0

Posted · Report post

Ok i checked your CSS using firebug (http://getfirebug.com) and made the following changes http://d.pr/i/hCQ6

.alignleft {
  padding:0;
}

I also removed the following padding that made it line up better http://d.pr/i/iGyH

 

I have checked this link http://sjf.scottishjazzfederation.net/ but the site is not available. 

 

To remove the padding you can use Custom CSS. isolate and inspect the elements using your browser tools or firebug and add the custom code to your customize plugin or child theme. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Hi Slsp - Could you provide a live link to your site so we can take a look? 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

I've nearly got it but still doesn't align with the nav bar

the site url is http://twb.thewhiskybond.net/

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

So more like this? http://d.pr/i/iqhG

 

if so try this 


.alignleft {
  padding:0;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

yes, thats exactly what I'm wanting to

achieve but it hasn't worked it made it

worse ! 

 

http://sjf.scottishjazzfederation.net/

 

Also is there a way of reducing the white

space under the logo and navbar?

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

My bad, forgot to clear the cache.

Thanks tons for your help.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks for informing us the issue has been resolved.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Still battling here, this is driving me nuts can't get the alignment to

listen tried to pull the nav bar down so it aligns with the logo using

 

 .pl-section-pad { 

  padding: 63px 0;

 

.....but nothing.

 

And the line which has to run underneath is just not happening at

all, what on earth am I doing wrong ?

 

The site is in 404 mode so I can't show you unless I give admin access.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Am I correct in understanding you want the branding image in the fixed navbar to line up, left, with the content margin below it?

 

If so, try this:

.navbar .plbrand img {
     line-height: 63px;
     max-height: 63px;
     padding: 6px 0;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

At the moment I have managed to get it like this https://www.dropbox.com/s/xrwxvvq5do7u7ic/Screen%20Shot%202013-11-02%20at%2015.46.58.png

but need it to look like this https://www.dropbox.com/s/5uhclbbhzf45n9l/Screen%20Shot%202013-11-02%20at%2015.52.03.png

where I'm battling is reducing the white background which is a repeat image and the line running under it navigation bar and the logo.

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

If you use Firebug or Chrome's Inspect Tool, you'll see the elements you need to adjust.

This might work:

.header .pl-area .pl-section .pl-section > .pl-section-pad {
    margin-bottom: 0;
    padding: 0;
}

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

Thanks, I've so nearly got. This stuff is worse than fishing. 

Share this post


Link to post
Share on other sites
  • 0

Posted · Report post

But you don't have to take it off the hook!

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