Custom CSS issue front page text area

  • Resolved jlcruise

    (@jlcruise)


    9 years, 5 months ago

    Hello experienced folks. I’ve been using the forums and Chrome’s inspection feature to customize my new site with additional CSS (using Jetpack). Everything seems to be working except one change. My static front page is only using the posting text area for a single tagline, and I’m trying to resize it to have a smaller white box floating over my featured image.

    I’ve pasted in:
    .front-page-content-area .with-featured-image {
    padding: .5em;
    . padding-top: 1.5em;
    . padding-right: 1.5em;
    . padding-bottom: .5em;
    . padding-left: 1.5em;
    . 
 width: 457px;
    }

    and this appears to work fine in the real-time image, shrinking the padding below the text from 1.5 to 0.5. However, when I save and publish this, the effect is lost. Is this a conflict with something else I’ve done? Or am I hitting limits set elsewhere in the code? Thanks.Jennifer.

    The site is here: http://485.b4a.myftpupload.com/

Viewing 7 replies - 1 through 7 (of 7 total)
  • Chad Chadbourne

    (@shireling)

    9 years, 5 months ago

    Hi @jlcruise!

    It looks like you have some extra lines in your CSS. You’re setting the padding on all four size down to .5 em, but then you have individual declarations for each one below that (I suspect they were copied over from Chrome’s inspector).

    Try removing the extras, like this:

    .front-page-content-area .with-featured-image {
    padding: .5em;
    width: 457px;
}

    That should get you an even .5em padding on all four sides 🙂

    Thread Starter jlcruise

    (@jlcruise)

    9 years, 5 months ago

    Hi, Chad.

    Thanks for your help. Again, it looks fine in the page with the Customizing sidebar open, but nothing is changed on the page after saving, in Chrome or in Safari. I also don’t see any changes if I edit the padding in your text to .25, say, even while I am in the customizing view, and cutting out the css and adding it back in has stopped having any effect, it seems….??

    Chad Chadbourne

    (@shireling)

    9 years, 5 months ago

    I think what you’re seeing is the effect of the Customizer narrowing the screen.

    When the page is 1180px or wider (Customizer closed) the content in that section has a minimum height applied to it. When it’s narrower than 1180 (Customizer open or smaller devices) that style isn’t used.

    Because of that responsive style, and the fact that the Customizer makes your page narrower, it’s triggering a height difference.

    Try adding this bit of CSS:

    .front-page-content-area .entry-summary,
.front-page-content-area .entry-content {
    min-height: none;
}

    That should eliminate the minimum height when you close your Customizer 🙂

    Also keep in mind, that ‘Edit’ link will also make the section look taller for you. Your visitors won’t see it, but it does add some vertical spacing when you’re signed in.

    If it’s still giving you trouble, try closing the Customizer and using your browser tools to inspect the element and see what the padding is showing up as when you have the custom CSS in place.

    Let me know what you find!

    Thread Starter jlcruise

    (@jlcruise)

    9 years, 5 months ago

    Thanks, Chad. The mystery continues. The CSS changes work in the customizer view, but not otherwise, logged in or out. Inspecting the CSS indicates that the changes ARE there (padding reduced, now to .15 em, other padding commands lined through).

    I’m wondering if it the settings for div.hero-container-inner that are creating this problem. Any ideas on what to alter there? There are inherited settings that may be driving the boundaries of the white area, regardless of the padding around my text?

    Chad Chadbourne

    (@shireling)

    9 years, 5 months ago

    Your padding is good – it looks like I mistyped that min-height setting though.

    Try changing min-height: none to min-height: 0

    Sorry about that!

    Also adding

    .front-page-content-area .with-featured-image .entry-content {
    margin-bottom: 0;
}

    Might help clear away some of the additional vertical spacing.

    Thread Starter jlcruise

    (@jlcruise)

    9 years, 5 months ago

    Yay! That did it. Thanks for your help, Chad. I also managed to shorten the white space below the widgets as well. Success.

    Chad Chadbourne

    (@shireling)

    9 years, 5 months ago

    Yay! Glad it’s working 🙂

Viewing 7 replies - 1 through 7 (of 7 total)

The topic ‘Custom CSS issue front page text area’ is closed to new replies.