Jump to content
Sign in to follow this  
designpoint

Footer image solid line

Recommended Posts

designpoint    0
designpoint

Hi,

 

Trying to move down the white solid line under the image to line itself up with the lines on either side. Currently I have this CSS code but seems like it is not changing:

 

 

#footer .footerimage li {
  padding-bottom: 10%;
}

 

is this incorrect? Assistance will be much appreciated

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

Since I cannot see your site, it's difficult to say. Is the site live? If so, please provide a link.

 

  padding-bottom: 10%; is not correct.  10px would be correct.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
designpoint    0
designpoint

sorry forgot to add...its test.propertywealthadvisors.com.au

Share this post


Link to post
Share on other sites
Rob    547
Rob

I see you didn't add the proper class surrounding the image.

 

Here's what I need you to do:

1. Go to that footer column.

You'll see <img align="left" src="http://test.propertywealthadvisors.com.au/wp-content/uploads/2013/05/TheClarence.jpg">

Please re-write that as follows:

<div class="myclarence"><img align="left" src="http://test.propertywealthadvisors.com.au/wp-content/uploads/2013/05/TheClarence.jpg"></div>

 

2. Add the following code to Dashboard > PageLines > Site Options > Custom Code:

 

.myclarence {

margin-bottom: 65px;

}

 

Note: You may need to adjust that 65px, since it is not exact, only a demonstration.

 

Another way of doing it would be to add a specific height to the image HTML itself.  Like this:

 

<img align="left" src="http://test.propertywealthadvisors.com.au/wp-content/uploads/2013/05/TheClarence.jpg" height="81px">

 

One problem I can see is that you're using a massive image scaled really small.  That will do two things: First, it will not work in IE, especially older versions, and next it will slow your page's load time. I'd recommend using a graphics editor to make a copy of the image and scale it graphically to the desired size. Upload that size, and still keep the height requirements.

 

Keep in mind, you've added an unspecified element to that content.  The white line only sees a short line of code, and doesn't see the desired height, nor does it see any height at all. So, the line acts as if it's only a single line break.  If you specify a height, then the white line will adjust to meet the specification.


Former PageLines Moderator, Food Expert and Raconteur

Share this post


Link to post
Share on other sites
designpoint    0
designpoint

I have added as you suggested but still no affect to the line for some reason?

Share this post


Link to post
Share on other sites
Rob    547
Rob

Hi,

 

Well the div didn't work with the margin, so let's try replacing margin-bottom: 65px; with height: 81px;

 

Or, as I suggested in the second part of the reply, add height="81px" to the image HTML tag.


Former PageLines Moderator, Food Expert and Raconteur

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  

×