Support » Plugin: Behance Portfolio Manager » Number of columns

  • Resolved maximsurin

    (@maximsurin)


    Hello, thank you for your plugin.
    Is it possible to limit the number of columns to three?
    Thank you in advance.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author eleopard

    (@eleopard)

    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.

    Thread Starter maximsurin

    (@maximsurin)

    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!

    Plugin Author eleopard

    (@eleopard)

    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.

    Thread Starter maximsurin

    (@maximsurin)

    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!

    Plugin Author eleopard

    (@eleopard)

    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.

    Thread Starter maximsurin

    (@maximsurin)

    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!

    Plugin Author eleopard

    (@eleopard)

    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 🙂

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Number of columns’ is closed to new replies.