Jump to content


Photo
- - - - -

Image alignment issues

image alignment mediabox

Best Answer greenfly , 24 October 2013 - 08:05 PM

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. 

Go to the full post


  • Please log in to reply
13 replies to this topic

#1 Slsp

Slsp

    Advanced Member

  • Members
  • PipPipPip
  • 30 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 24 October 2013 - 04:23 PM

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.

 

Attached File  Screen Shot 2013-10-24 at 17.19.29.png   54.97KB   1 downloads 

 

Thanks in advance.



#2 Jake

Jake

    Advocate

  • Premium
  • 565 posts
  • LocationNC, USA
  • Country: Country Flag

Posted 24 October 2013 - 04:52 PM

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



#3 Slsp

Slsp

    Advanced Member

  • Members
  • PipPipPip
  • 30 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 24 October 2013 - 05:19 PM

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

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



#4 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 24 October 2013 - 06:33 PM

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

 

if so try this 

 
.alignleft {
  padding:0;
}


#5 Slsp

Slsp

    Advanced Member

  • Members
  • PipPipPip
  • 30 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 24 October 2013 - 07:10 PM

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?



#6 greenfly

greenfly

    Advocate

  • Members

  • 3268 posts
  • LocationManchester, England
  • Framework Version:latest
  • Country: Country Flag

Posted 24 October 2013 - 08:05 PM   Best Answer

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. 



#7 Slsp

Slsp

    Advanced Member

  • Members
  • PipPipPip
  • 30 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 24 October 2013 - 08:35 PM

My bad, forgot to clear the cache.

Thanks tons for your help.



#8 Danny

Danny

    Is Awesome!

  • Moderators
  • 17666 posts
  • LocationManchester, UK
  • Country: Country Flag

Posted 25 October 2013 - 01:48 PM

Thanks for informing us the issue has been resolved.



#9 Slsp

Slsp

    Advanced Member

  • Members
  • PipPipPip
  • 30 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 02 November 2013 - 03:07 PM

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.



#10 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 November 2013 - 03:42 PM

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;
}


#11 Slsp

Slsp

    Advanced Member

  • Members
  • PipPipPip
  • 30 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 02 November 2013 - 03:54 PM

At the moment I have managed to get it like this https://www.dropbox....at 15.46.58.png

but need it to look like this https://www.dropbox....at 15.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.



#12 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 November 2013 - 04:11 PM

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;
}


#13 Slsp

Slsp

    Advanced Member

  • Members
  • PipPipPip
  • 30 posts
  • Framework Version:dms
  • Country: Country Flag

Posted 02 November 2013 - 04:35 PM

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



#14 Rob

Rob

    One Smart Egg

  • Members
  • 13575 posts
  • LocationEast Coast, USA
  • Framework Version:The Latest, of course
  • Country: Country Flag

Posted 02 November 2013 - 05:55 PM

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







Also tagged with one or more of these keywords: image, alignment, mediabox