you can see that the image is fitting the column width for the portfolio post but in doing so - on most desktop screens - it overflows the viewport and requires the user to scroll.
The artist has a mix of horizontal and vertical images - I'm wondering if there is some way I can force the image to resize to fit the viewport by default - or somehow set it to honor the viewport height rather than the column width by default.
I have some work-arounds but it seems to me that this must be a recurring issue for people with the portfolio element. Please advise. Thanks
If you have any additional ideas that would be great but I can imagine that this may be just one of those very tricky problems. Thanks for the input - I didn't know about "vh"
Hi - I'm working on a simple artist's portfolio site and running into a head-scratcher. on this page http://dev.studiotwo.solutions/joegoodwin/portfolio/chinese-landscape/
you can see that the image is fitting the column width for the portfolio post but in doing so - on most desktop screens - it overflows the viewport and requires the user to scroll.
The artist has a mix of horizontal and vertical images - I'm wondering if there is some way I can force the image to resize to fit the viewport by default - or somehow set it to honor the viewport height rather than the column width by default.
I have some work-arounds but it seems to me that this must be a recurring issue for people with the portfolio element. Please advise. Thanks
Kevin
Hey Again,
You can use custom css to adjust the image size as per the viewport :
Add this into the Custom CSS box located in your Salient Options panel (Make Sure there are no red cross in the Box) :
.single-portfolio #post-area img { height: 80vh !important; width: auto !important; }Thanks
ThemeNectar Support Team
Ah - that worked BUT it's now forcing all the other images to stretch to fit the viewport - for instance this page http://dev.studiotwo.solutions/joegoodwin/portfolio/long-pond/ is a wide image - http://dev.studiotwo.solutions/joegoodwin/images/
If you have any additional ideas that would be great but I can imagine that this may be just one of those very tricky problems. Thanks for the input - I didn't know about "vh"
if you want to limit it to particular pages you can add the post id in the css selector or add the css to those posts only .
/* will work on Chinese Landscape page only */ .single-portfolio.postid-66 #post-area img { height: 80vh !important; width: auto !important; }Thanks
ThemeNectar Support Team
Brilliant! Thanks!