[付费] 使房屋广告具备响应式

市场
1

您希望完成什么工作？
我需要将“站内广告”的响应式 CSS 添加到一个新的主题组件中，以便“站内广告”能在所有设备上实现响应式显示：

目前，在移动设备上，“站内广告”的显示效果与桌面端相同，导致用户体验不佳。

我还需要协助添加响应式 HTML，以正确填充“站内广告”的内容。

您能为此任务提供的预算是多少（美元）？
不确定？

2 个赞
3

如果您阅读了站内广告帖子，会发现它们提供了设置桌面和移动设备图片的方法。

<a href="" class="banner-ad" target="_blank">
    <img class="desktop" src="">
    <img class="mobile" src="">
</a>

只需为每种设备设置对应的图片（手机宽度较小，桌面宽度较大），就完成了！

我个人使用的尺寸如下：

  • 移动设备：1282x311
  • 桌面设备：755x90

然后创建一个组件，并添加以下 CSS：

$cta-background-color: #FE4644;
$cta-text-color: #FFFFFF;

.banner-ad {
    display: flex;
    clear: both;
    max-width: calc(#{$topic-body-width} + #{$topic-avatar-width} + (#{$topic-body-width-padding} * 2));
    background-color: #FEF25E;
    border: 1px solid $primary;
    box-sizing: border-box;
    img {
        height: 90px;
        &.desktop {
            display: block;
        }
        &.mobile {
            display: none;
            width: 100%;
        }
    }
    .container {
        display: flex;
        justify-content: space-between;
        align-items: center;
        width: 100%;
        p {
            margin: 0;
            &.small {
                font-weight: bold;
                text-align: right;
                padding: 1px 5px;
                background-color: #000000;
                color: #FFFFFF;
            }
            &.big {
                font-size: 24px;
                line-height: normal;
                padding-bottom: 5px;
                color: #434343;
                font-weight: lighter;
            }
        }
        .cta {
            color: $cta-text-color;
            background-color: $cta-background-color;
            &:hover {
                background-color: darken($cta-background-color, 20%);
            }
        }
    }
}

@media only screen and (max-width: 672px) {
    .banner-ad {
        img.desktop, p {
            display: none;
        }
        img.mobile {
            display: block;
        }
        .container {
            justify-content: center;
            .cta {
                margin: 0 5px;
                font-size: 12px;
            }
        }
    }
}

尺寸看起来有些奇怪，但效果很好！您可以在这里查看实际效果。

为这个功能付费并不划算……或许不如直接捐款给 Discourse 更有意义！

5 个赞
FKB Pro - Social theme
4

视具体情况而定，为此付费可能是值得的。人们很容易忘记，对于有 Web 开发背景的人来说显而易见的事情，对于没有相关背景的人来说可能相当复杂。

1 个赞
5

我知道，但这个社区非常棒，大多数人都会乐意帮忙解决这些问题 :stuck_out_tongue:

1 个赞
6

确实！作为参考，我可能会收取 200-500 美元的费用。这可能只是应用你刚才提供的代码那么简单，但也可能需要花费更长时间，因为我无法预知在任务推进过程中会出现哪些意外情况。

3 个赞
7

@Juan_Adamuz

感谢您的帮助！我知道如何将 HTML 添加到房屋广告中，以及如何将 CSS 添加到主题中，但我在使其正常工作方面遇到了困难，所以您的消息确实帮助我更好地完成了这项工作。

不过，似乎还存在一个问题。在移动端和桌面端，轮廓周围看起来好像有另一个横幅显示在其后面，并且横幅广告的右侧有一个不应该存在的黄色区域。那个在“帖子流上方”显示且没有轮廓或黄色部分的广告，在移动端却没有显示。您知道这是怎么回事吗？

您可以在 Unschooling(.)com 的首页上看到该广告——正如您所看到的，它们在下方的显示都是正确的，这表明 CSS 中的某些内容导致了轮廓和黄色区域的出现。

以下是我使用的 HTML 以及来自房屋广告页面的 CSS：

<center><a href="https://shareasale.com/r.cfm?b=839764&amp;u=2163380&amp;m=40843&amp;urllink=&amp;afftrack=" class="banner-ad" target="_blank">
<img class="desktop" src="https://static.shareasale.com/image/40843/Declan728X90.jpg">
<img class="mobile" src="https://static.shareasale.com/image/40843/2kids468x60.jpg">

8

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.