Portfolio shortcode should display one column like WP.com

htdat commented 5 years ago

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

Steps to reproduce the issue

Use a default theme like Twenty Sixteen.

Create some portfolio posts with featured images
Create a page and use [portfolio] shortcode
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:

    .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

stale[bot] commented 5 years ago

This issue has been marked as stale. This happened because:

It has been inactive in the past 6 months.
It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

stale[bot] commented 4 years ago

This issue has been marked as stale. This happened because:

It has been inactive in the past 6 months.
It hasn’t been labeled `[Pri] Blocker`, `[Pri] High`.

No further action is needed. But it's worth checking if this ticket has clear reproduction steps and it is still reproducible. Feel free to close this issue if you think it's not valid anymore — if you do, please add a brief explanation.

Automattic / jetpack