White space through CSS in pictorico theme

• 

  sfascha · Member · Apr 2, 2015 at 3:33 pm

  • Copy link
  • Add topic to favorites

  For the Pictorico theme, can I edit the CSS to make the photos larger and have white space between the slider posts as well as between post photos on the homepage?

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

• 

  thesacredpath · Member · Apr 3, 2015 at 12:19 am

  • Copy link

  The size of the images on the Front page (posts page) are set in the theme php script files, and things completely go awry if we try and change that with CSS. I’ve added some space between the images on the main page though, with the following CSS and everything seems to work and doesn’t blow up on phones or tablets. Go to Appearance > Customize > CSS, delete all the informational text in that window, and paste in the custom CSS and see what you think.

  .blog .site-content .hentry, .archive .site-content .hentry, .search .site-content .hentry {
      margin-bottom: 5px;
      margin-right: 5px;
  }
  .blog .site-content, .archive .site-content, .search .site-content {
      max-width: 1200px;
  }

• 

  sfascha · Member · Apr 6, 2015 at 2:30 pm

  • Copy link

  Thank you, I really appreciate it!! unfortunately it is not rendering properly on the iPad. Is it better (or even possible) to adjust it through the padding, rather than through margins? Just wondering. Thanks again for your help.

• 

  thesacredpath · Member · Apr 6, 2015 at 6:55 pm

  • Copy link

  Since you have removed the CSS, I can’t look at it with my iPad. I would suggest then that we use a Media Query to limit things to screens/devices wider than 1024px.

  @media screen and (min-width: 1025px) {
  .blog .site-content .hentry, .archive .site-content .hentry, .search .site-content .hentry {
      margin-bottom: 5px;
      margin-right: 5px;
  }
  .blog .site-content, .archive .site-content, .search .site-content {
      max-width: 1200px;
  }
  }