Cubic, change columns using CSS

• 

  dwpokjfpoeir · Member · Dec 3, 2015 at 8:00 am

  • Copy link
  • Add topic to favorites

  Hi
  I need help with CSS on my Cubic theme
  I want to have 4 columns instead of 3 (which is the original number)
  Anyone out there who could help with this huge problem please?

  My Site: http://ansatt.ringerike.kommune.no/

• 

  antimobo · Member · Dec 27, 2015 at 4:43 pm

  • Copy link

  Ditto. That would be absolutely great to find out. 4 columns on a 1900 wide screen would be much better.

• 

  dwpokjfpoeir · Member · Dec 28, 2015 at 8:26 am

  • Copy link

  Pfff.. AS AN IT PRO I FOUND OUT MYSELF!!!

  Thanks alot Forum….

  Let me tell you how I found out.

  /*————————————————————–
  7.3 x <= 1024px
  ————————————————————–*/
  
  @media screen and (min-width: 1024px) {
  /* Content */
  .archive .hentry,
  .blog .hentry,
  .search-results .hentry {
  padding-bottom: 33.3333%;
  width: 33.3333%;
  }
  .archive .hentry:nth-of-type(2n+3),
  .blog .hentry:nth-of-type(2n+3),
  .search-results .hentry:nth-of-type(2n+3) {
  clear: none;
  }
  .archive .hentry:nth-of-type(3n+4),
  .blog .hentry:nth-of-type(3n+4),
  .search-results .hentry:nth-of-type(3n+4) {
  clear: left;
  }
  }

  This is copied right out of the “Editor” or the original code, whatever you call it.

  Mess a little about this.

  1. Change “Clear: left” to “None”
  2. Change padding-bottom and width to a smaller scale
  3. and some more stuff.

  This is my result and I got 6×2 columns

  /*————————————————————–
  7.3 x <= 1024px
  ————————————————————–*/
  
  @media screen and (min-width: 1024px) {
  /* Content */
  .archive .hentry,
  .blog .hentry,
  .search-results .hentry {
  padding-bottom: 15%;
  width: 15%;
  padding-right: 16.665%;

  }
  .archive .hentry:nth-of-type(2n+0),
  .blog .hentry:nth-of-type(2n+0),
  .search-results .hentry:nth-of-type(2n+0) {
  clear: none;
  }
  .archive .hentry:nth-of-type(4n+0),
  .blog .hentry:nth-of-type(4n+0),
  .search-results .hentry:nth-of-type(4n+0) {
  clear: none;
  }
  }

• 

  antimobo · Member · Dec 31, 2015 at 8:44 pm

  • Copy link

  oh great! thanks a lot! looks like nobody else was smart enough to figure it out ;)