Dear Maximsurin,
Thanks for using the Portfolio Manager.
Regarding the width of the wrapper. The projects take the width of the theme to arrange themselves.
You can override this by pasting the following CSS in Portfolio Manager > Settings > Advanced Tab > Custom CSS box and paste the following:
.eds-bpm-main{
max-width: 730px;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
Let me know if this works.
Hi,
Thank you for your answer.
I think i was not clear in explaining what I want to achieve here.
What i actually need is to have only three columns at any screen size,
excerpt may be for mobile – only one column.
i use fullscreen page.
Thnx again!
Dear Maximsurin,
I checked and right now, all the screen sizes show 3 columns, up until 768px (tablet).
Now, if you are saying the 3 columns need to be full width to the website, that would not be possible as well, since Behance saves 404px x 316px as the largest size for the project thumbnail.
So if we increase the size more then that, the projects images would look pixellated.
And even with that width set using the customized CSS, this is how the mosaic will look: https://adobe.ly/2hQ6Efi
Let me know if this width would be suitable for you, and i”ll pass you the necessary CSS.
Thank you again eleopard,
Your information was very useful.
I’d try your CSS codes and see if images are getting too pixelated.
I would like to use them at max possible width.
It was great to receive such a quick response.
Have a beautiful day!
Dear Maximsurin,
Please remove the previously added Code in the Custom CSS box and paste the following:
.eds-bpm-main{
max-width: 1272px !important;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
}
.isotope-item, .eds-bpm-view, .eds-bpm-view .eds-bpm-mask{
width: 404px !important;
height: 316px !important;
}
.eds-bpm-view img{
width: 404px !important;
}
@media (max-width: 1300px){
.eds-bpm-main{
max-width: 720px !important;
}
.isotope-item, .eds-bpm-view, .eds-bpm-view .eds-bpm-mask{
width: 220px !important;
height: 158px !important;
}
.eds-bpm-view img{
width: 220px !important;
}
}
@media (max-width: 767px){
.eds-bpm-main{
max-width: 300px !important;
}
.isotope-item, .eds-bpm-view, .eds-bpm-view .eds-bpm-mask{
width: 280px !important;
height: 219px !important;
}
.eds-bpm-view img{
width: 280px !important;
}
}
Let me know if this works.
Thank you again,
I used your code and extended it for more width situations:
.eds-bpm-main{
max-width: 1272px !important;
margin-left: 0px;
margin-right: auto;
margin-bottom: 10px;
}
.isotope-item, .eds-bpm-view, .eds-bpm-view .eds-bpm-mask{
width: 404px !important;
height: 316px !important;
}
.eds-bpm-view img{
width: 404px !important;
}
@media (max-width: 1024px){
.eds-bpm-main{
max-width: 1000px !important;
}
.isotope-item, .eds-bpm-view, .eds-bpm-view .eds-bpm-mask{
width: 310px !important;
height: 242px !important;
}
.eds-bpm-view img{
width: 310px !important;
}
}
@media (max-width: 768px){
.eds-bpm-main{
max-width: 720px !important;
}
.isotope-item, .eds-bpm-view, .eds-bpm-view .eds-bpm-mask{
width: 220px !important;
height: 158px !important;
}
.eds-bpm-view img{
width: 220px !important;
}
}
@media (max-width: 480px){
.eds-bpm-main{
max-width: 355px !important;
}
.isotope-item, .eds-bpm-view, .eds-bpm-view .eds-bpm-mask{
width: 355px !important;
height: 278px !important;
}
.eds-bpm-view img{
width: 355px !important;
}
}
@media (max-width: 374px){
.eds-bpm-main{
max-width: 300px !important;
}
.isotope-item, .eds-bpm-view, .eds-bpm-view .eds-bpm-mask{
width: 300px !important;
height: 235px !important;
}
.eds-bpm-view img{
width: 300px !important;
}
}
It is fine for now, thank you, although I might want to make it even more liquid at some stage.
Great that you found time for support.
All the best!
Dear Maximsurin,
Larger screens would need to have more columns then 3 to fill up the space.
If you’d like the projects to have as many columns as the space is available, we go have a fluid view as well.
I am marking this ticket resolved for now. However, please feel free to reopen it if you need any more help 🙂
