Automattic / Automattic/jetpack

Portfolio shortcode should display one column like WP.com

Open
#11,201 2 comments 0 reactions 0 assignees View on GitHub
[Feature] Custom Content Types [Pri] Low Enhancement Good For Community
Dominant language
PHP
Stars
1.8k
Forks
898
Avg merge
1d 18h
Merged PRs (30d)
774

Description

This issue is original here https://github.com/Automattic/themes/issues/484

#### Steps to reproduce the issue

Use a default theme like Twenty Sixteen.

1. Create some portfolio posts with featured images
2. Create a page and use [portfolio] shortcode
3. See this page.

#### What I expected

It should display one column like the portfolio archive page - my-site.com/portfolio

#### What happened instead

It's displaying two columns.

#### Other notes

WP.com site is displaying one column for both shortcode and archive pages.

#### Workaround

Use the custom CSS code in Customizer:

```
@media screen and (max-width: 768px) {
.portfolio-entry-mobile-first-item-row,
.portfolio-entry-mobile-last-item-row {
width: 100% !important;
}
}
```

#### Some debug:

In p1547178515407200-slack-themes, this is what @alaczek found out:

Looks like in the generated code there’s a class added to potyfolio items on self-hosted `.portfolio-entry-mobile-first-item-row`, which triggers a media query:

```@media screen and (max-width:768px) {
.portfolio-entry-mobile-first-item-row{
margin-right: 4%;
width: 48%;
clear:both;
}
.portfolio-entry-first-item-row {
clear:none;
}
.portfolio-entry-mobile-last-item-row{
width: 48%;
margin-right: 0;
}
}
```

This is what forces portfolio items into two columns on mobile.

Those codes are from Jetpack:

https://github.com/Automattic/jetpack/blob/f8078c2cd12ac508334da2fb08e37a92cf283c14/modules/custom-post-types/css/portfolio-shortcode.css#L60

https://github.com/Automattic/jetpack/blob/f8078c2cd12ac508334da2fb08e37a92cf283c14/modules/custom-post-types/portfolios.php#L799

Contributor guide

Open the contributing guide

Research direction

Start with modules/custom-post-types/portfolios.php and modules/custom-post-types/css/portfolio-shortcode.css, especially the linked shortcode and responsive CSS sections. Compare the shortcode output with the portfolio archive and verify that the shortcode displays one column on mobile without requiring the documented Customizer workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
css, php
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Clearly specified
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.