Portfolio gallery in tab

[goodtimesmag]

Hi Mohammad, do you have any updates for me?

[Mohammad – SUPPORT]

Hi,
My colleague will assist you shortly.
Thanks
Mohammad

[goodtimesmag]

Alright, I am looking forward for a solution!

[David Martin – Support]

You want a 4 col portfolio layout within the tabs? Please test this:

.spb_tabs .tab-content .row [class*="span"] li {
    width: 20%!important;
}

Thanks.

[goodtimesmag]

Hi David,

the code did not exactly the job, as you can see here: http://goodtimesdeals.de/snowboard/

The portfolio layout in the tab looks different than the regular portfolio.

[David Martin – Support]

Are you referring to there being no margin between the items?

Please add backup screenshots to be specific, we can help you faster this way.

Thanks.

[goodtimesmag]

Yes, please have a look on the image attached

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Perfect, that is great:

Please amend the CSS:

.spb_tabs .tab-content .row [class*="span"] li {
    width: 20%!important;
    margin-left: 30px!important;
}

Thanks.

[goodtimesmag]

Now I have the following problems:

1) The portfolio gallery in the tab is not centered/has not the same size like the regular portfolio gallery (see image 1).

2) The portfolio gallery in the tab behaves differently on smaller devices (see image 2) than the regular portfolio gallery (see image 3).

Attachments:

You must be logged in to view attached files.

[David Martin – Support]

Please add a WP login, it will be quicker.

Thanks.

[goodtimesmag]

This reply has been marked as private.

[David Martin – Support]

Great, cheers.

For reference here is the updated:

.spb_tabs .tab-content .row ul.portfolio-items {
    margin-left: -30px!important;
}

.spb_tabs .tab-content .row [class*="span"] li {
    width: 220px!important;
    margin-left: 20px!important;
}

@media (min-width: 1200px) {
.spb_tabs .tab-content .row [class*="span"] li {
    width: 270px!important;
   margin-left: 30px!important;
}
}

@media (max-width: 979px) and (min-width: 768px) {
.spb_tabs .tab-content .row [class*="span"] li {
    width: 166px!important;
}
}

@media only screen and (max-width: 767px) {
.spb_tabs .tab-content .row [class*="span"] li {
    width: 48%!important;
    margin-left: 0!important;
    float: left;
}
.spb_tabs .tab-content .row [class*="span"] li:nth-child(2n) {
    margin-left: 4%!important;
}
}

Thanks.

[goodtimesmag]

Thank you very much David!

[Mohammad – SUPPORT]

Hi,
Great thanks to David.
Mohammad

[goodtimesmag]

Hi David, I updated my portfolio in the tabs and now the portfolio in the women tab look strange. Please have a look here: http://goodtimesdeals.de/snowboard/