如何在ipad上使CPT响应？

Question

我在使用ipad格式时遇到了问题。我在桌面上有一排3个cpts，当在ipad上时，它们会下降到2并位于屏幕的左侧。

以下是该页面的链接：https://athleteperks.co.uk/your-perks/

如果有人可以告诉我如何修复此错误，那就太好了。

Answer 1

网格框架将其完整的12列网格保持为768px，并以767px切换到其单列网格。这里有几个问题。

w-col-3左列（过滤器）在其内联上指定了px宽度，它覆盖了网格框架设置的默认25％。

element.style {
    width: 290px;
}

删除它，左列现在正确地位于左侧。如果您不知道设置内联样式的内容可以覆盖它，但这很麻烦而且不理想。

.filter-bar.w-col-3 {
    /* overrides an inline style set by I don't know */
    width: 25% !important;
}

@media ( max-width: 767px ) {
    .filter-bar.w-col-3 {
        /* overrides an inline style set by I don't know */
        width: 100% !important;
    }
}

另一个问题是你的浮动特权上有w-col-4，它指定了32％的宽度，但也是10px的边距 - 右边是32％。这导致它比预期少一个div。保证金权利看起来不错，所以保持这一点。您需要在其上添加自定义宽度。

.perk.w-col-4 {
    width: calc( 32% - 10px );
}

现在那些响应就像你的网格所期望的那样。