Image Resizing

• 

  farrmillerwashington · Member · Jun 30, 2014 at 1:45 pm

  • Copy link
  • Add topic to favorites

  On two of my pages, http://fmwtestsite.wordpress.com/ and http://fmwtestsite.wordpress.com/farr-miller-washington-in-the-news/, there are two rows of two images each. In fullscreen these items look clean and neat, but as the page shrinks, they become four offset images in four rows. How do I get the images to resize themselves as the page shrinks, similar to how the lead image does?

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

• 

  designsimply · Member · Jun 30, 2014 at 10:46 pm

  • Copy link

  This is a little tricky because you can use CSS to adjust image size, but you may not want to do that for some browser widths. To make a change to just some widths, you can use a media query:
  http://en.support.wordpress.com/custom-design/custom-css-media-queries/

  Here is an example you can try out. What it does is apply the change only to browsers that are 620 pixels wide or larger. Then it uses one of the body classes (you can find them by looking at the body tag in the HTML page source) for each page to force all images in the content area to 48% width:

  @media screen and (min-width: 620px) {
  	.home .content img,
  	.page-id-4 .content img {
  		width: 48%;
  	}
  }

  Some things to keep in mind with a change like this one: the down side to this solution is that any new image you add to either page will be forced to 48% width, so if you wanted to add other images later, you would need to adjust the CSS. The other downside is that this CSS overrides the widths you set on the images themselves, so it could get confusing if you add the CSS and then forget and try to edit the image sizes directly later.