Increase Grid Image Size?

• 

  thekindnessblog · Member · Jan 28, 2015 at 9:42 am

  • Copy link
  • Add topic to favorites

  Hey :)

  Is there a way to increase the grid image sizes on the home page of http://www.kindnessblog.com ?

  Ideally, and I understand this might well not be possible, I’d like to have something similar to the home page of this theme (Cubic) but with everything else kept the same. I don’t want to switch themes to Cubic as there are a few things I do not like, however I do like the large grid style home page.

  Is this possible? Can anyone kindly advise?

  Thank you in advance.

  Best, Mike.

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

• 

  thesacredpath · Member · Jan 29, 2015 at 12:51 am

  • Copy link

  Hi Mike, on responsive themes with a grid layout, increasing image size in the grid causes the layout to go awry since the theme itself calculates image sizes, and they don’t always stay the same size (change due to screen/window width).

• 

  thekindnessblog · Member · Jan 29, 2015 at 11:19 am

  • Copy link

  Hello thesacredpath and thank you for taking the time to respond and explain. Much appreciated :)

  As I am unable to do what I had hoped for, are there any particular CSS codes[?] I can use to at least experiment with? Bearing in mind your words of caution above, ideally, I’d like to try out some/all the following;

  1. Increase the amount of grid squares so more posts are visible per page
  2. Increase/decrease grid square sizes?
  3. Any other variations of the same?

  Best, Mike.

• 

  kevmarsden · Member · Feb 2, 2015 at 8:25 pm

  • Copy link

  Hi Mike,

  The grid square sizes are hardcoded by the theme, so there aren’t many effective changes that can be made to the grid layout using CSS. If the site is made wider using CSS, more squares will appear, but this has a cascading effect because it changes the way the site is displayed at various the browser widths and screen sizes.

  If you have any other questions, please let us know. Thanks!

• 

  designsimply · Member · Feb 14, 2015 at 6:25 pm

  • Copy link

  I think most people avoid trying to do what you’re asking because expanding the image size if it is hard coded by the theme often results in a quality loss for an image. If you don’t stretch them too much, and a small change in quality is okay with you, then something like this could work:

  .blog .hentry,
  .blog .hentry:first-of-type,
  .blog .hentry:first-of-type .entry-thumbnail,
  .blog .hentry:first-of-type .no-thumbnail,
  .blog .hentry .entry-thumbnail,
  .blog img[class*="attachment-featured-home-"] {
  	width: 360px;
  	height: 300px;
  }

  Adjust the numbers and try adding/removing some of the selectors to experiment and see what they do.

  I figured out those selectors using this method:
  http://en.support.wordpress.com/custom-design/how-to-find-your-themes-css/