Changing size of CUBIC frames

• 

  wine1percent · Member · Jan 5, 2017 at 5:07 pm

  • Copy link
  • Add topic to favorites

  Really enjoying CUBIC and especially the way it seamlessly represents Instagram framing. It is big and gorgeous. Is there a way to reduce the frame size on the page (PC)? In other words, have more frames visible on the main page. Right now it is 3-wide so basically there are only three posts visible and when you start scrolling, 6. Can it be made to go 4-side? 5-wide? Just trying to pull people in to clicking with more visible content.

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

• 

  staff-loquaciousloon · Staff · Jan 5, 2017 at 7:04 pm

  • Copy link

  Hi there!

  It’s possible, yes, using some Custom CSS – which is part of a Premium Plan or Business Plan.

  With Custom CSS, you can open My Site > Customize > CSS to add styling codes like the ones I’ve included below.

  Reconfiguring grids can be tricky – because you have to put some math into the code so the theme knows where to start each row.

  It’s a little easier on Cubic than on some other themes, because there isn’t a lot of spacing to contend with in between the images.

  Here are a couple of examples of the CSS you’d use for what you’ve described. These will only affect larger screens – smaller devices like tablets will still fall back to their standard two column layout (unless you added another block of styles for smaller screens).

  These also only target the blog page – archive pages (like categories) and search results can be added, but they make it a bit harder to read, so I’ve left them out for now :)

  Four column Cubic:

  @media screen and (min-width: 1024px){
  /*set post size to one quarter of the screen width*/
  .archive .hentry, .blog .hentry, .search-results .hentry {
      padding-bottom: 25%;
      width: 25%;
  }
  
  /*start a new row after every fourth post*/
  .blog .hentry:nth-of-type(4n+4) {
  	clear: left;
  }
  
  /*make sure new rows don't start anywhere else*/
  .blog .hentry:nth-of-type(4n),
  .blog .hentry:nth-of-type(4n+1),
  .blog .hentry:nth-of-type(4n+2),
  .blog .hentry:nth-of-type(4n+3) {
    clear: none;
  }
  }

  Five column Cubic:

  @media screen and (min-width: 1024px){
  /*set post size to one fifth of the screen width*/
  .archive .hentry, .blog .hentry, .search-results .hentry {
      padding-bottom: 20%;
      width: 20%;
  }
  
  /*start a new row after every fourth post*/
  .blog .hentry:nth-of-type(5n+5) {
  	clear: left;
  }
  
  /*make sure new rows don't start anywhere else*/
  .blog .hentry:nth-of-type(5n),
  .blog .hentry:nth-of-type(5n+1),
  .blog .hentry:nth-of-type(5n+2),
  .blog .hentry:nth-of-type(5n+3),
  .blog .hentry:nth-of-type(5n+4){
    clear: none;
  }
  }