Portfolio image responsive width

  • Resolved marko.soini

    (@markosoini-1)


    9 years, 9 months ago

    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/. 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

    (@britner)

    9 years, 9 months ago

    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

    (@markosoini-1)

    9 years, 9 months ago

    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

    (@britner)

    9 years, 9 months ago

    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

    (@markosoini-1)

    9 years, 9 months ago

    Thank you very much! Site is out in the end of the month, I think:) –> http://www.markosoini.net

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

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