Portfolio Grid

Shapely
1

Hi,

based on advice on this forum, I’ve managed to piece together this CSS code that sets 3 columns for the portfolio section in the homepage:

@media (min-width: 990px){
 .shapely_home_portfolio .col-md-3.masonry-item.project {
    width: 33%;
    position: static !Important;
}

Things appear fine (3x2 grid) at the end of this page: http://kajovisuals.com

However as I’m not experienced with CSS I can’t figure out how to do the same for the separate portfolio page. I’ve already gone through this forum, but to no avail.

Thus things aren’t as pretty (4 cols) @ http://kajovisuals.com/portfolio

Help appreciated.

TIA,
Jouni

2

Hi Jouni,

I hope you are well today and thank you for your question.

You can try achieving this by adding the following CSS code in the Custom CSS option of your theme on the below path.

Admin Area -> Appearance -> Customize -> Shapely Options -> Other

@media (min-width: 990px){
 body.post-type-archive-jetpack-portfolio .col-md-3.masonry-item.project {
    width: 33%;
    position: static !Important;
}
}

Best Regards,
Movin

3

Works, thanks Movin!

4

You are most welcome here :slight_smile:

5

@Jouni, your site looks pretty awesome - love your portfolio too. Can I ask how you achieved the gallery look within a category of your portfolio? I am trying to create a gallery and yours looks so close to what I am trying to achieve with the move in titles on hover etc so thought i’d ask.

all the best!

6

Hi, thanks for your kind words, and sorry for a late reply - I just found the reply notification email in the spam folder.

If I understand your question right, you’ll need to:

  1. Go to: WordPress Dashboard > Jetpack > Settings > Tiled Galleries > Activate
    2.1) Go to: WordPress Dashboard > Jetpack > Settings > Tiled Galleries > Configure
    2.2) Enable: Tiled Galleries: Display all your gallery pictures in a cool mosaic.
  2. In your Portfolio Project: Edit Gallery > Gallery Settings > Type: “Tiled Mosaic”

If that didn’t do the trick or you’re wanting something else, come back to us on the forum.

Regards,
Jouni

7

Hi Jouni,

your homepage looks awesome!

2 questions:

  • How do you get the black space between the pictures of your portfolio-widget (front Page) ?
  • At your portfolio pages (e.g. http://kajovisuals.com/portfolio/commercial/) there is just a small space between “Portfolio” and the title “Commercial”. How do you get this?

Thanks a lot for your help!

8

I have the same question:

I would also like to have a margin between the portfolio images within the widget.

Anyone?

9

It’s ok - I found out how to change the margin - within (style.css) change margin: 0px; to margin: 5px;

/*!---------- 20. PORTOFLIO ----------*/

.project {
  transition: all 0.3s ease;
  -webkit-transition: all 0.3s ease;
  -moz-transition: all 0.3s ease;
  opacity: 1;
  padding: 0;
}
.project .image-tile {
  margin: 0px;
}
10

Hi There,

To help us keep support thread separates could you please create your own thread for your question here https://colorlibsupport.com/c/shapely/ instead of replying on others thread as it makes the thread messy and hard to read.

If you want to you can also add reference of this thread in your newly created thread.

We would be more than happy to help you on your new thread.

Thanks,
Movin