0

I'm using a theme called "Blockst" from DeoThemes. On each Post title, I have an incredibly large title background. Unfortunately, I have no idea why or how it became so large. Unfortunately, I'm not a WordPress/CSS expert, but I don't think I caused this. Interestingly, it looks terrible on PC, but on mobile it looks like perfect spacing..

Example page: https://eric.frydendal.org/installing-uptime-kuma-behind-nginx-with-a-self-signed-cert/

Notice the teal title background is HUGE. I've tried:

  1. Adjusting the header size in Themes > Customize. This adjusts the floating menu only
  2. In Customize > Blog > Single Post, I disabled all options: "Show featured image", "Show category", "Show date", etc. Nothing affected the background size.
  3. I believe it has something to do with the Featured Image, but I don't fully understand how those are used.
  4. Verified none of my custom CSS has anything to do with sizes (just colors).

Looking at the source, I think something related to this line is causing my issue, but I don't know why it's leaving space for a non-existent image:

<!-- Featured Image -->
<div class="single-post__featured-img single-post__featured-img--layout-1 bg-overlay bg-overlay--dark" >

Here's my complete Custom CSS:

/* Change header background color after scrolling */
.nav--sticky.sticky {
    background-color: #1e1e1e;
}

/* Change only header on top of page dark mode */
.blockst-header.nav {background-color: #1e1e1e;}

/* Change header link color & make the line under header light blue */
:root {
    --deo-nav-links-color: #e9e9e9;
    --deo-border-color: #31ECDE;
}

/* Change back-to-top arrow color */
#back-to-top a {
    color: #1d2327;
}

/* Homepage only background dark */
.page-id-942 {background-color: #1e1e1e !important;}
1
  • It's probably worth talking to the theme authors too, about why you've got the featured-img classes when you've disabled featured images for this post. They're the ones that are causing the problem, as below, and sounds like a bug that they're there.
    – Rup
    Commented Dec 20, 2022 at 12:10

1 Answer 1

2

Your theme is adding a large amount of padding to the .single-post__featured-img--layout-1 class: 100px top and bottom, or 180px for screens wider than 1025px. Look in https://eric.frydendal.org/wp-content/themes/blockst/style.css

Try Css code

.single-post__featured-img--layout-1 {
    padding: 20px 0px;
}
3
  • You might need two copies of this, one for the base case and one for the @media only screen and (min-width: 1025px) version, in case that counts as more specific and overrides the override.
    – Rup
    Commented Dec 20, 2022 at 12:09
  • And actually if you like the spacing on mobile then I guess you like the 100px version? You could just change the min-width version to 100px to match. You can try shrinking your browser width on the PC to trigger the change.
    – Rup
    Commented Dec 20, 2022 at 12:13
  • Fantastic! Thank you so much for the helpful insight. The provided CSS immediately resolved the issue. I will see if I can find a way to reach out to the theme authors and let them know. This is just my cheap self-hosted CV site, so I haven't paid for their premium license with support included. Regardless, thank you both for the help!
    – Eric F
    Commented Dec 21, 2022 at 5:34

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.