Edin Theme Header Image

Hi @pzick,

Are you referring to the image on the home page of rugcleanermastermind.com? If so, you can reduce its height with some custom CSS.

To add custom CSS: Firstly set up a child theme or activate a custom CSS plugin. (If you have Jetpack installed then you can activate its custom CSS module.)

Enter the following snippet in either the editor for your CSS plugin or the style.css file of your child theme:

@media screen and (min-width: 1230px) {
    .hero.with-featured-image, body[class*="front-page"] .hero {
        padding: 40px 0;
    }
}

Increase/decrease the first value (currently 40px) of padding in the above snippet to experiment with different heights.

Let me know if that works out for your needs!

I created the child theme and tried adjusting the padding value but no change. There’s a lot of blank space above and below the text in the header image area. Any other suggestions? I’d really like to get rid of that extra space.

I’m using the classic menu style. Can I reduce the size of the site title text and space between that and menu to help reduce some space?

Is rugcleanermastermind.com the site you’re making these changes on? I’m not currently seeing the custom CSS that I provided on that site. Did you make sure to activate your child theme via Appearance > Themes after creating it?

I’m using the classic menu style. Can I reduce the size of the site title text and space between that and menu to help reduce some space?

Yes, the following custom CSS will reduce the margin at the bottom of the title and also the minimum height that the title will take up:

@media screen and (min-width: 600px) {
    .site-logo-link, .site-title {
        margin-bottom: 20px;
        min-height: 20px;
    }
}

No, rugcleanermastermind.com is not the site. The site I’m working on is in maintenance mode right now so I can’t show you. Increasing or decreasing the padding: 40px does not make any difference.

The above coding you provided for the site title text did help – thank you. Once I have the membership portion set up blocking access to pages, I’ll provide you the site link so you can see the home page and spacing I am referring to.

Hi @pzick,

Thanks for clarifying! Reply back here when you’re able to provide a link to the site you’re trying to change, and we can then help with the specific CSS you need from there.

Here is the site link: https://psychotherapistmastermind.com/

The area in blue with the white text is where I want to reduce the amount of space above and below the text.

Thank you for sharing!

The following should reduce the spacing on devices that are 1230px in width or larger:

@media screen and (min-width: 1230px) {
    .hero.with-featured-image, body[class*="front-page"] .hero {
        padding: 90px 0;
    }
}

The following should then reduce the spacing on devices that are between 1020px and 1230px in width:

@media screen and (min-width: 1020px) {
    .hero.with-featured-image, body[class*="front-page"] .hero {
        padding: 90px 0;
    }
}

Could you give both of the above snippets a try? If they don’t work, keep them saved in your custom CSS and reply back here so I can take another look.

Both have been added to custom CSS – no change. I’ve left them on the customer CSS.
https://psychotherapistmastermind.com/

I’m seeing the following in your site’s custom CSS:

@media screen and (min-width: 1230px) {
    .hero.with-featured-image, body[class*="front-page"] .hero {
        padding: 40px 0;
    }
}

The HTML entity for the quotes – " – is displaying in place of the actual quotation marks – "". Could you replace the HTML entities with the actual quotation marks?

That change did make a difference. It is much better than it was. Thank you for your help.

Back to this same site https://psychotherapistmastermind.com/, how can I reduce the font size in the blue area?

Checking back on inquiry above about how to change the font size in the blue area of https://psychotherapistmastermind.com/.

Hi @pzick,

Apologies for the delay in my reply! I was away at my company’s annual meetup last week.

For future note: I recommend starting a separate thread on this forum for any extra questions you have. Separate threads are easier for us to manage and may result in a quicker reply, as other forum helpers are more likely to jump in.

The font size of the text in the blue area of your site can be reduced with the following custom CSS:

.hero .entry-content {
    font-size: 1em;
}

Increase/decrease the value of font-size to your liking. Increments/decrements of 0.1 are enough to have an impact e.g. 0.9em, 0.8em, etc.

Hope that helps out!

Wonderful – thank you so much!