Padding Below Staff Photo on Individual Staff Page

Support Area Forums United Padding Below Staff Photo on Individual Staff Page

This topic contains 2 replies, has 2 voices, and was last updated by  Ashley Davis 3 years ago.

Viewing 3 posts - 1 through 3 (of 3 total)
URL to the page in question: http://servingyourpurpose.com/staff/mary-beshear/
  • Author
    Posts
  • #20731

    Ashley Davis
    Participant

    Bill,

    Just looking to shorten the bottom padding of the staff photo once clicked through to the individual bio page.

    (Would like the paragraph starting with “Over the years, Mary has served…” to fall directly under the photo rather than to the right side.)

    Thanks!

    #20732

    Bill Robbins
    Keymaster

    Ashley,

    I would suggest getting a copy of the program Espresso. It has a live CSS editor that you can use to make changes to any web page and then save them easily when you have things as you like them.

    What I do with a request like this is view the page in Espresso’s preview. It has a tool called x-ray that lets you see which styles in the style.css file apply to that element. From there I click on the style and copy it. Then I scroll down to the bottom of the style.css file and paste the style there and make my changes. Once I have it like I want it to be, I copy the code and paste it here to go in the Custom CSS box. I knew a bit about CSS, but that tool is what really helped me learn it. I don’t mind helping, but these requests are pretty straightforward so at this point, I’d rather help you learn CSS and then help with situations that are trickier like the second line indentation from this morning.

    Here’s the style that applies to that image:

    
    .full-staff-image {
    	float: left;
    	margin-right: 30px;
    	margin-bottom: 30px;
    	position: relative;
    }
    

    Since we’re not looking to change the float (that’s what causes the image to go to one side with the other content lining up next to it) or the position, we can remove those which will leave us with this for the Custom CSS:

    
    .full-staff-image {
    	margin-right: 30px;
    	margin-bottom: 30px;
    }
    

    Then you can adjust the margins to fit your needs.

    Hope that helps out,
    Bill

    #20741

    Ashley Davis
    Participant

    Thanks Bill!
    Works great.

Viewing 3 posts - 1 through 3 (of 3 total)

The topic ‘Padding Below Staff Photo on Individual Staff Page’ is closed to new replies.