CUBIC theme: Changes in Grid Pattern

• 

  nextlevelux · Member · Mar 1, 2015 at 9:58 am

  • Copy link
  • Add topic to favorites

  Dear all,

  I want to either

  – show a teaser text of the articles in the tiles (if that is possible with CSS anyway)

  or otherwise

  – reduce the dimensions of the tiles, maintaining them in a square format.

  Important: I want the new tiles then to be 5 in a row instead of 3. How do I do that in CSS?

  Note: I have researched this forum to find out how to change the dimensions, but it only did change the width not the height of them, no matter what I typed into the jetpack.

  THANKS VERY MUCH IN ADVANCE! :)

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

• 

  thesacredpath · Member · Mar 2, 2015 at 5:18 pm

  • Copy link

  Hi there,

  I want to either show a teaser text of the articles in the tiles (if that is possible with CSS anyway)

  That is not possible with CSS. CSS is styling document used by the browsers to position and style the elements of a web page. It cannot be used to add functionality.

  or otherwise reduce the dimensions of the tiles, maintaining them in a square format.

  You can use the following to reduce the size of the text in the titles

  .wf-active .blog .entry-title {
      font-size: 1.23em;
  }

  but that will not add additional posts to the rows. The number of posts in a row is set in the theme PHP script files, and we cannot edit those, and even if we reduce the size of the post entries on the main page, it will still only display 3 per row.

  To reduce the size of the post blocks, you can try the following CSS, which takes them from a width and bottom padding of 33.3333% down to a width and bottom padding of 20.3333%. As I said, there is still only 3 posts per row.

  .archive .hentry, .blog .hentry, .search-results .hentry {
      padding-bottom: 20.3333%;
      width: 20.3333%;
  }