[Resolved] Home h2 sizes

[Maike]

Hi guys,

I am still struggling to make some of the changes.
Today I’m trying to address the homepage.
(https://creativeandpractical.com

Basically, I still don’t understand how to call certain elements of the site.

Like I’m trying to make some simple changes like:

1) Decrease the font size that’s in the first grid “wp-show-posts-single” like it says ’17 BEST Valentine’s’. Like that doesn’t work well for longer titles, so the font size needs to be decreased.

2) The Grid under Featured.
I’d actually like to change the h2 font size, but can’t figure that out. I’ve tried to copy and modify the code you’ve given me for the right sidebar, but I am clearly messing up along the way.

3) SALADS: I’d also like to reduce the h2 font size by a lot.

4) ‘POPULAR POSTS’ this is another section that has the h2 as an overlay which I like, but it’s still too big.

My problem is simply, I can’t figure out how to call these individual pieces and make them.

Can you please help me again.

Thanks a lot,
Maike

[Leo]

Hi there,

1) The top section is inside the page hero so you can do this:

.inside-page-hero .wp-show-posts h2 {
    font-size: 30px;
}

2) The grid section as an id wpsp-1275 so you can do this:

#wpsp-1275 h2 {
    font-size: 30px;
}

https://www.screencast.com/t/sapYDJzY1

This should also apply to questions 3 & 4.

You just need to find the specific ID of the posts list and write the CSS similar to what I provided above.

[Maike]

Thank you, thank you, Leo! That was so helpful. Thank you for the screencast shot, that’s exactly what I didn’t know, like what part to call and yes now I can make the changes. That’s amazing. I’m so excited. Thank you!!!

Maike

[Maike]

Hi Leo.
Ok, unfortunately I ran into the next snag. I’ve taken a screenshot to show you. On the left you see what I see in the customizer on the right it’s the page (refreshed, cache cleared) in incognito mode. Somehow the fonts are not showing the way I’m choosing them. 😢
Please help.
Maike

[Leo]

When something works in customizer preview but no on live site, 99% of the time it’s a caching issue.

I would recommend disabling WP Rocket while you are developing it and activate it once it’s done.

Glad I could help 🙂

[Maike]

Hi Leo.

I deactivated WP Rocket and changed the css to

#wpsp-3613 h2 {
    font-size: 35px;
    font-family: roboto,sans-serif;
    text-transform: uppercase;
}

And now it’s working! Thank you again. (You can can make a list of how many ‘thank you-s’ I am sending to you, Tom, and David.

[Leo]

Glad to hear that we’ve been helpful!

Always happy to see when users are willing to spend the time and learn as well 🙂

[Author]

Posts