Question

我正在使用Tesseract主题制作网站：thevandreasproject.com。结合我使用的名为SiteOrigins PageBuilder的插件，响应度不适用于主题。 PageBuilder与GoogleFonts插件中的间隔器插件和边距控件不兼容，这是我用来制作网站的。

通过研究，我发现其他一些人有同样的问题（参见：https://siteorigin.com/thread/page-builder-background-image-wont-rescale-for-mobile-devices/），基本上你必须用它自己的自定义CSS来定位每一行。我删除了间隔器和所有googlefont控件，但它仍然无法正确重新缩放。在网站的主页上我使用这个CSS代码来定位背景图像和标题文本以正确定位和调整它们：

    @media (min-width: 680px) {
    .custom-home-background .textwidget .home-headline{
        margin-top: 40px;
        margin-bottom: 450px;
        font-size: 60px;
        font-family: 'Roboto';
        font-weight: 500;
        letter-spacing: 10px; 
     }
    }

它在我的电脑屏幕上看起来正确，但在我的iPhone屏幕上无效。另一个问题是我在MangoButtons插件中使用的按钮。我不知道如何正确地确定它的目标。它也没有反应。任何帮助将不胜感激！

由于

Answer 1

Welp花了几个小时的时间，我终于弄清楚了，并学会了一些CSS编码：）

@media (min-width: 680px) {
    .home-background .textwidget {
        font-size: 50px;
        font-style: normal;
        font-weight: 500;
        letter-spacing: 8px;
        font-family: 'Roboto';
        min-height: 880px;
        padding-top: 20px;
    }   

}

@media (max-width: 679px) {
        .home-background .textwidget {
                padding-top: 20px;
                padding-bottom: 175px;
                font-style: normal;
                font-weight: 500;
                font-family: 'Roboto';

    }

.site-content {
        height: 0!important;
 }
#footer-banner {
   padding:50px;
    }
}

Wordpress Tesseract主题响应改变CSS

1 个答案: