Full wide portfolio page

[DenisKornilov]

Hello!

When i set “full wide” portfolio page my image become stretched to the full wide.
I understand that it’s right, but i want my image to be original size but centered.

Could you provide some custom CSS for me?

[DenisKornilov]

I mean “full width”, sorry.

[Melanie – SUPPORT]

Hi, I’m afraid that’s how the portfolio has been built by the developer. If you’d like to change that you would need to modify the php code.

All the best

[DenisKornilov]

Hi,

i have this custom css:

article.type-portfolio figure.media-wrap img {
max-width:100%;
width:auto!important;
float:right;
}

this makes the image is not stretched, but don’t aligns it to the center.
Can you help?

[Swift Ideas – Ed]

Try this:

article.type-portfolio figure.media-wrap {
text-align: center;
}
article.type-portfolio figure.media-wrap img {
max-width:100%;
width:auto!important;
margin: 0 auto;
display: inline-block;
}

– Ed

[laranz – SUPPORT]

Hi,

Can you provide the URL of that portfolio, that you achieved so far?

Thanks for your co-operation and patience over this period when we spent holidays, we wish that you too had a great holiday. 🙂

Let me know, what you got.

Thanks,
laranz.

[DenisKornilov]

Hi guys!

Thank you, ED! Looks great: http://deniskornilov.com/?portfolio=nexi
I know that it can be a little annoying, but is there a way to move the header to the top and make it to be centered?

Thanks a lot!

[DenisKornilov]

And one more issue:

I found out that if the sum of width of two images (1800px) is less than resolution of the display (1920px), they stick together. Link: http://deniskornilov.com/?portfolio=natalie-tours

Whether it is possible to divide them?

Thanks!

[Swift Ideas – Ed]

Change the code to:

article.type-portfolio figure.media-wrap {
text-align: center;
}
article.type-portfolio figure.media-wrap img {
max-width:100%;
width:auto!important;
margin: 0 auto;
display:block;
}

You want to move the text header to the top? This would mean editing single-portfolio.php

Hope that helps.

– Ed

[rhodez]

Hi,

I am trying to do something similar with portfolio images / blog images. This CSS works for keeping blog / portfolio images streching over 100% width. However it creates another problem: the portfolio image jumps to top of the page:

/* BLOG / PORTFOLIO IMAGES DON’T STRECH OVER 100% AND CENTER */

figure.media-wrap {
text-align: center;
}
figure.media-wrap img {
max-width:100%;
margin: 0 auto;
width:auto!important;
display: inline-block;
}

Tried to use this CSS to give the image a 100px top margin but it doesn’t work for me:

article.type-portfolio figure.media-wrap img {
margin-top: 100px;
}

Here is a sample portfolio item from my site: http://sometek.fi/portfolio/tiimilukio-verkkosivusto/

[rhodez]

Sorry, my mistake,

I had chosen “full width media” instead of standard media. Now portfolio images are working properly and I don’t even need the second CSS code.

[Melanie – SUPPORT]

Fantastic!