[uxer55]

Hi,

I am attempting to do two things my portfolio items:

1) Have the items in the grid with a grey border (I managed to achieve this so far with CSS)

2) Create space between the portfolio item’s image and the border. Right now, as you can see in the image, there is no padding between the image and the border. I tried some CSS on my own but have no succeeded. Can you help me do this?

3) Create space between each portfolio item (like maybe 10-15px between each item, outside the grey border). Can you help me with this one too?

Thanks very much

https://imgur.com/a/oAlq0wy

[serkan]

Hi,
Could you provide me your related urls for each questions?
Thanks

[uxer55]

Hi,

Sure:

http://imakestuff.online/#/portfolio

Thanks

[serkan]

Hi,
Could you try to use these custom css codes;
1) .media-cell { border-color: #f9fafc; }
2) .media-grid .media-box { padding: 12px; }
3) .card-content.is-loaded .entry-content { margin: 15px }
Thanks

[uxer55]

Hi,

Thank you, this solves the first two issues.

However, this one remains:

3) Create space between each portfolio item (like maybe 10-15px between each item, outside the grey border). Can you help me with this one too?

[serkan]

Hi,
Can you try to use this custom css code;

.media-cell { width: 48% !important; }

Thanks

[uxer55]

Hi,

This now causes all portfolio items to occupy its own row (http://imakestuff.online/#/portfolio).

[serkan]

Hi, The custom css code that I provide is creating a space in each portfolio. So you can get 15px of space from the edges.

[uxer55]

Hi,

Before I enter that added CSS, here is what the portfolio looks like: https://imgur.com/8Ar3FYv – you can see 3 items in a row.

After I enter that code, here is what the portfolio looks like: https://imgur.com/cTMPgaj – you can see now there is only 1 item per row.

I would like 3 items per row on desktop, 2 on tablet, and 1 on mobile (how it operates without the added CSS, but I would also like a little bit of spacing between each item in the row. How can we do this?

Thank you

[serkan]

Hi, If you remove all modifications, it will return to its original state. In the original case there is enough space. As you can see;
http://themes.pixelwars.org/unrovr/demo-01/#/portfolio
Thanks

[uxer55]

I deleted all previous code regarding the portfolio items and applied only the CSS lines you mentioned above.

This still does not create the space between the cards. It also causes many responsive issues (resizing to mobile, then back to desktop causes portfolio items to overlap).

What I would like is 1) All original functionality from the out-of-the-box demo. 2) Some visual separation between portfolio items. This can be a border, or if it’s easier, each portfolio item can be a “card” type, with a shadow.

This might require a little bit of playing around with, I have tried and cannot seem to solve it. I will email you my login, can you please try to achieve the two requests above?

I appreciate your help.

[serkan]

Hi,
I just added a custom css code, please check it if it is working for you.

[uxer55]

Hi,

This works responsively for tablet and mobile now but not for the largest view.

On my desktop, it shows a single item per row, when it should show three. How can we fix that?

Thanks

[uxer55]

Actually, I also noticed a responsive bug.

When you resize the browser to be smaller, then resize it back to be large, the items overlap.

[serkan]

Hi,
I will forward this topic to our developer and i will keep you updated.
Thanks