Foodie Recipe Index Question

[thefrugalmom]

I am trying to decrease the space between the image and title of post (below the image): http://thefrugalmom.net/recipes-2/
Can someone direct me on what to change?
Thanks!

[rfmeier]

Hello,

You have a border-top within your style.css on the title that is causing a huge margin.

/* style.css line 775 */
.featured-content .entry-title,
.featuredpost h2 {
	border-top: 34px solid #fff; 
	font-size: 14px;
	font-size: 1.4rem;
	line-height: 1.2;
	margin: 0;
        font-weight: bold;
	text-align: center;
}

Remove the border-top: 34px solid #fff; line and that should solve your issue.

---

Ryan Meier – Twitter

[thefrugalmom]

Thanks. I removed that line of text, but the white space is still there.
http://thefrugalmom.net/recipes-2/

[rfmeier]

Sorry for the late reply. The forum has not been notifying me of replies like it should.

The following changes will remove the all the white space below the image;

/* style.css line ~799 */
.featured-content img,
.featuredpost img {
.featured-content img;
 	display: block;
 	margin: 0 auto 10px;
 	margin: 0 auto 1rem;
 	margin-bottom: 0; /* set margin bottom to 0 */
    border-top: 12px solid #fff;
}

Add the following under the previous within the style.css file

/* style.css  */
.featured-content a.aligncenter,
.featuredpost a.aligncenter {
.featured-content a.aligncenter;
 	margin-bottom: 0;
}

---

Ryan Meier – Twitter

[thefrugalmom]

Thank you!

[thefrugalmom]

When I add this code:

/* style.css */
.featured-content a.aligncenter,
.featuredpost a.aligncenter {
.featured-content a.aligncenter;
margin-bottom: 0;
}

It makes the images on the home page centered (which I love), but it also makes all links centered and appear on it's own line in the body of a paragraph.

Is there a way to alter this to keep links in line and images centered?

[rfmeier]

thefrugalmom,

On line 783 of your style.css file change text-align: center; to text-align: left;.

---

Ryan Meier – Twitter

[thefrugalmom]

Okay... Changing this allows the link to float left, but now the link it on it's own line. Is there any way to have links within a paragraph remain in said paragraph?

Thanks!

[thefrugalmom]

For reference: http://thefrugalmom.net/valentines-day-gift-for-teachers/

[rfmeier]

thefrugalmom,

I was confused at first, but I found this within your style.css file;

/* line 816 */
.has-post-thumbnail .entry-content a {
    display: center;
    text-align: block;
}

This is actually incorrect. display: center; should be display: block;. But this would put a link on it's own line as you were describing, which is not what you want.

The other rule is also incorrect text-align: block; should be text-align: center; which would center the link text, but it wouldn't change much within a paragraph.

You would be safe to remove the block of css code above.

http://thefrugalmom.net/valentines-day-gift-for-teachers/

---

Ryan Meier – Twitter

[thefrugalmom]

Thank you. After removing that block of code, the images still display to the left from the home page (which is what I am trying to center.)
http://www.thefrugalmom.net

:/

[Author]

Posts