Title: Portfolio image responsive width
Last modified: September 1, 2016

---

# Portfolio image responsive width

 *  Resolved [marko.soini](https://wordpress.org/support/users/markosoini-1/)
 * (@markosoini-1)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/portfolio-image-responsive-width/)
 * Hi!
 * Have a problem with Pinnacle theme’s Portfolio image size in responsive mode.
   The largest thumbnail created is 300×300 px, but should be about 479×479 px, 
   which is the responsive page width.
 * Example: [our-portfolio/](http://themes.kadencethemes.com/pinnacle/our-portfolio/).
   Resize the window width to 400-479 px. The image is aligned to left and it’s 
   size is 300×300 px, and it lefts white space in right side.
 * Is there any way to alter the size of the images that the theme is creating out
   of the portfolio item’s featured image? Giving the img-tag width 100% does the
   job, BUT the resolution of the image is still 300 x 300px. It weakens the quality
   of the resulted image and looks bad.
 * I would appreciate the help !

Viewing 4 replies - 1 through 4 (of 4 total)

 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/portfolio-image-responsive-width/#post-7651903)
 * Hey,
    Because the images are using srcset if you add:
 *     ```
       .portfolio-imagepadding img {
           width: 100%;
       }
       ```
   
 * then when your viewing on a mobile device the browser should pick up the retina
   images already.
 * But if you want to edit the grid size you can do that through a child theme as
   well. edit template-portfolio-grid.php line 102.
 * And another option would be to to center the image:
 *     ```
       .portfolio-imagepadding {
           text-align: center;
       }
       ```
   
 * and still another options would be to make the image two columns for that screen
   size:
 *     ```
       @media (max-width: 767px) and (min-width: 400px) {
       .p-item {
           width: 50%;
           float: left;
       }
       }
       ```
   
 * Kadence Themes
 *  Thread Starter [marko.soini](https://wordpress.org/support/users/markosoini-1/)
 * (@markosoini-1)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/portfolio-image-responsive-width/#post-7651941)
 * Works like a charm!! Thank you very much! 🙂
 * Should I also change the other item sizes in template-portfolio-grid.php, in 
   lines 93, 96, 99 (400, 300, 300px)?
 * Also the two column layout wouldn’t be bad also, more items visible at the same
   time in mobile screens.
 *  [Ben Ritner – Kadence WP](https://wordpress.org/support/users/britner/)
 * (@britner)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/portfolio-image-responsive-width/#post-7651970)
 * Those are for different column settings you can change if you want. If your not
   using another column setting then you don’t need to change.
 * Kadence Themes
 *  Thread Starter [marko.soini](https://wordpress.org/support/users/markosoini-1/)
 * (@markosoini-1)
 * [9 years, 9 months ago](https://wordpress.org/support/topic/portfolio-image-responsive-width/#post-7651978)
 * Thank you very much! Site is out in the end of the month, I think:) –> [http://www.markosoini.net](http://www.markosoini.net)

Viewing 4 replies - 1 through 4 (of 4 total)

The topic ‘Portfolio image responsive width’ is closed to new replies.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/pinnacle/1.8.10/screenshot.png)
 * Pinnacle
 * [Support Threads](https://wordpress.org/support/theme/pinnacle/)
 * [Active Topics](https://wordpress.org/support/theme/pinnacle/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/pinnacle/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/pinnacle/reviews/)

 * 4 replies
 * 2 participants
 * Last reply from: [marko.soini](https://wordpress.org/support/users/markosoini-1/)
 * Last activity: [9 years, 9 months ago](https://wordpress.org/support/topic/portfolio-image-responsive-width/#post-7651978)
 * Status: resolved