Featured Category CSS Customization

• 

  vlogazul · Member · Sep 11, 2015 at 6:46 am

  • Copy link
  • Add topic to favorites

  I am using the Expound theme and I would like to know if there’s a snippet for the following.

  In the 4 category section just below the featured post, as of now 3 of the 4 posts have a title of 2 rows of text. I want to know if there’s a snippet to always make the first row of the title text to be side to side, for instance; I would like for the title on the first row to begin at the beginning of the image and to end as well at the end of the image. I was trying to use the Justify feature on the text but it seems that depending on the words, it adjusts the text but sometimes it skips a lot of spaces as you might know. Is there a snippet for that?

  The blog I need help with is: (visible only to logged in users)

• 

  thesacredpath · Member · Sep 11, 2015 at 9:27 pm

  • Copy link

  Hi, Justify has its limitations as you have found out. I don’t know of anyway to produce this result. What about using a media query and centering the text below the images at screen/window widths wider than when they go to a single column?

  @media screen and (min-width: 1081px) {
  .featured-content-secondary .entry-title {
      text-align: center;
  }
  }

• 

  vlogazul · Member · Sep 14, 2015 at 8:54 am

  • Copy link

  ok great, thank you very much.

  Would there be a snippet to reduce the white space gap between the image and the blue background text in the 4 post category section of the featured post? pretty much adjacent to each other.

• 

  thesacredpath · Member · Sep 14, 2015 at 5:40 pm

  • Copy link

  There isn’t any padding or margin that is creating that gap, so what we will need to do is to use a negative top margin to bring it up just a bit.

  @media screen and (min-width: 1081px) {
  .featured-content-secondary .entry-header {
      margin-top: -5px;
  }
  }

• 

  vlogazul · Member · Sep 14, 2015 at 9:17 pm

  • Copy link

  It works perfect, Thanks.
  Is there a snippet to make the infinite button at the bottom of the main page that says “Entradas antiguas” disappear from the main page but only from the main page?

• 

  thesacredpath · Member · Sep 15, 2015 at 10:42 pm

  • Copy link

  We can precede the infinite handle selector with the “home” CSS body class like this.

  .home #infinite-handle {
      display: none;
  }

  That will limit the hiding of that button to only the home page.