Portfolio picture sizes

8 replies · opened Nov 6, 2016

IivanpossNov 6, 2016

trying to fit a square peg into a round hole - well similar to that anyway- lol

I am using the portfolio 1- alt template. I have jpegs or png's that are higher than wider. They are 460w x 511h. (Taller than wide)

If I am not mistaken your container is set up for 720w x 400h - I think. (wider than tall)

When I place my jpeg into the code it is all squished, SO... how can I change the size of your container to accommodate my pics.

SSemicolon WebSTAFFNov 6, 2016

Hello,

You can consider using the following code for a Flexible Height:

.portfolio-1 .portfolio-item .portfolio-image a,
.portfolio-1 .portfolio-item .portfolio-image img { height: auto !important; }

This will definitely work fine. Let us know if we can help you with anything else or if you find any further issues.

IivanpossNov 6, 2016

OK so I used the code below in the head and inserted the picture into the html code and I get a non-squashed picture (that's good so its partially working) but only about 1/2 of the picture. In other words the container is too short so only about 1/2 the picture displays

<style type="text/css">
.portfolio-1 .portfolio-item .portfolio-image a,
.portfolio-1 .portfolio-item .portfolio-image img { height: auto !important; }

</style>

SSemicolon WebSTAFFNov 7, 2016

Hello,

Can you please provide us with a Live URL so that we can check out the exact issue and provide you with a more accurate solution for this. Thanks for your Patience.

Meanwhile, do let us know if we can help you with anything else or if you find any further issues with Canvas.

IivanpossNov 7, 2016

the problem is that the site isn't live yet- but here is a screen capture of what is happening.

The original png was all squished into the container distorting the picture. Now picture is not distorted but the container shape hasn't changed, so most of the picture is missing. There are 5 items in picture and only 2 are partially showing. I guess the container itself must resize to the picture size. png size is 460w x 511h.

IivanpossNov 7, 2016

sorry last reply was missing attachment. Here it is

IivanpossNov 7, 2016

This is an example of the picture that will go there (although it may not be this picture eventually)

SSemicolon WebSTAFFNov 7, 2016

Hello,

Thank You so much for taking time providing us with the Live URL. Please consider using the following code for a Flexible Height:

.portfolio-1 .portfolio-item .portfolio-image,
.portfolio-1 .portfolio-item .portfolio-image a,
.portfolio-1 .portfolio-item .portfolio-image img { height: auto !important; }

This should definitely work fine. Thanks for your Patience.

Do let us know if we can help you with anything else or if you find any further issues with Canvas.

Have the same question, or something new?

Sign in to the Canvas dashboard to reply or open your own topic. Canvas owners get direct help from the SemiColonWeb team.

Reply on the dashboard