Help with blog layout

[faiza]

Hi There, 

I need help with my blog layout. 

The white space between the featured banner image and text is too big and I would like to bring it up more. Can you please suggest what needs to be done?

Here is an example blog

I would like to fix this for all my blogs. 

Any help appreciated. 

Thanks

[Ty]

Hi @faiza,

I took a look at your blog and noticed a couple things, so this may take 3 or more steps to fix.

Step 1: Fixing your author section

Your author section is set to 'position: relative' with a negative top position. This positioning style makes it so your object is relative to itself. So by having a top value of -100px, you are moving it -100px from it's currrent position. This is what you currently have:

.author-section {
    position: relative;
    text-align: center;
    top: -102px;
}

To fix thise, I would replace it with

.author-section {
    position: relative;
    text-align: center;
}

This will bring it back to the start position.

Step 2 (optional): Removing the light gray border under the image

For this, your class '.custom-banner-bg' is getting a padding style of 50px set to the bottom. Although padding does add space between to options, padding handles in inner object, which is why you a gray background on it. Removing this padding Will Not remove any of your white space, but can hide the gray border (if you want to). You can do this by setting this:

.custom-banner-bg {
    background: #f2f2f2 none repeat scroll 0 0;
    padding: 0 0 50px; 
}

to this:

.custom-banner-bg {
    background: #f2f2f2 none repeat scroll 0 0;
    padding: 0;
}

Step 3: Adjusting the white space in the author section

The final space you can chop some white space off is on your page-center element. If you do steps 1 and two, the spacing should be even and you could leave it like this:

However, if you still wanted to tighten the spacing, you would have to update your ".page-center" element, currently you have this:

.body-container .page-center {
    padding: 40px 20px;
}

Which is giving you a padding of 40px to both the top and bottom, but also 20px to the left and right sides. To affect your vertical spacing you will want to change that first number, in this example, I changed it to:

.body-container .page-center {
    padding: 40px 20px;
}

You could definitely adjust these values to fit the style you want, but this should help explain how you go about changing the correct values. I hope this helps you out, let me know if you have any other questions, I'll be happy to take a look!

-- Ty

[faiza]

thanks for this but i still dont understand where i go to fix the author section? Can you please direct me step by step?

cheers

[Ty]

Hi @faiza,

So it seems that your `.author-section` element still has  this code (which is why your profile image is oddly positionioned).

.author-section {
    position: relative;
    text-align: center;
    top: -102px;
}

To update this element, you will need to go into your css file named: 42Video_Aug_2016-style.css and update it. You can find the above on line1146 in your CSS. You can swap it to this:

.author-section {
    position: relative;
    text-align: center;
    top: 0px;
}

That will center your element like so:

And then you can remove the gray bar by setting the padding of your element "custom-banner-bg" to 0. Hop into the same stylesheet and find this code

.custom-banner-bg {
    background: #f2f2f2 none repeat scroll 0 0;
    padding: 0 0 50px;
}

It should be located on line1086 and change it to this:

.custom-banner-bg {
    background: #f2f2f2 none repeat scroll 0 0;
    padding: 0px;
}

This will remove the extra spacing in the lower bottom of the 'customer-banner-bg' element and leave you with this as an end result.

Let me know how this works out, or if you need any more help!

-- Ty