Automattic / Automattic/jetpack
Portfolio shortcode should display one column like WP.com
- 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
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