[F]

Hi,

I have a few issues with how the Header Highlight Content is displaying. Please refer to https://sfurbanfarm.com

1) Spacing: As you can see there is blank white space in the left column. You can see this between the posts The Cost of Organic and the next post down, Bay Area Restaurants With Onsite Farms. Further down, the white space appears again in the left column. This looks terrible. How can I fix this?

2) Text coloring: As you can see in the first post The Cost of Organic, there is a dark box where the post excerpt appears. The text cannot be read because there is only one setting I can find to control the text color. So if I set it to a light color, then it can’t be read in all the other header highlight content excerpts, but it can be read in the one with the dark box. If I set it to a dark color, then it can be read in all the other excerpts, but not in the dark box.

Also, in the mobile device view, all the Header Highlight Content posts display with the dark box, so in that case, any dark text option will not show.

Please fix this, or tell me how to fix this. The only place I can find to control the text color is here: Customize – Color Options – Header Highlight Color.

3) Continue Reading button: where can I adjust the colors for this button? The hover color is unreadable.

4) What is the “small content color options for desktop view” in this area: Customize – Color Options – Header Highlight Color
I have no idea what this is.

Thank you.

[Mahesh]

@kataka-publishing:
1) Spacing: This issue is because you are using big fonts for headings and the more content text. Please limit the text.

2) Text Coloring: Use custom CSS for this. Go to Dashboard=> Appearance=> Customize=> Additional CSS box and add the following CSS:

#header-highlights-content .large-featured-image .entry-container {
    color: #fff;
}

@media screen and (max-width: 909px) {
    #header-highlights-content .entry-container {
        color: #fff;
    }
}

3) Add the following CSS:

.site .more-button a:hover, .site .more-button a:focus, .reply a:hover, .reply a:focus {
    background-color: #00ff00;
     border-color: #00ff00;
}

#header-featured-image .more-button a:hover, #header-featured-image .more-button a:focus, #feature-slider .more-button a:hover, #feature-slider .more-button a:focus {
    background-color: #00ff00;
    border-color: #00ff00;
}

4) This option is for Header Hightlight’s Small Content’s text color.
In your case: All header highlight contents except The Cost of Organic

Regards,
Mahesh

[Author]

Posts