[GEBÜHRT] Machen Sie House Ads responsiv

Marktplatz
1

Was möchten Sie umgesetzt haben?
Ich benötige das responsive CSS für Hausanzeigen, das in eine neue Themenkomponente integriert wird, damit unsere Hausanzeigen auf allen Geräten responsiv dargestellt werden:

Derzeit werden die Hausanzeigen auf mobilen Geräten genauso angezeigt wie auf dem Desktop, was zu einer schlechten Benutzererfahrung führt.

Außerdem benötige ich Unterstützung beim Hinzufügen des responsiven HTML, um die Hausanzeigen korrekt zu befüllen.

Wie hoch ist Ihr Budget in USD für diese Aufgabe?
Keine Ahnung?

2 „Gefällt mir“
3

Wenn du den Beitrag zu Hausanzeigen liest, findest du dort die Anleitung, wie du ein Desktop-Bild und ein Mobilbild festlegst.

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

Lege einfach die Bilder für beide fest (weniger Breite für Handys, mehr Breite für Desktop) – und das war’s!

Ich persönlich verwende diese Abmessungen:

  • Mobil: 1282x311
  • Desktop: 755x90

Erstelle dann eine Komponente und füge folgendes CSS hinzu:

$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;
            }
        }
    }
}

Seltsame Abmessungen, aber es funktioniert! Du kannst es hier live sehen: hier

Es lohnt sich nicht, dafür zu bezahlen… Vielleicht ist es besser, an Discourse zu spenden!

5 „Gefällt mir“
FKB Pro - Social theme
4

Je nach Situation kann es sich jedoch lohnen, dafür zu bezahlen. Man vergisst leicht, dass etwas, das für jemanden mit Erfahrung in der Webentwicklung offensichtlich erscheint, für jemanden ohne solche Vorkenntnisse ziemlich komplex sein kann.

1 „Gefällt mir“
5

Ich weiß, aber diese Community ist so großartig und die meisten Leute würden bei solchen Dingen helfen :stuck_out_tongue:

1 „Gefällt mir“
6

Stimmt! Als grobe Orientierung würde ich für diese Arbeit wahrscheinlich zwischen 200 und 500 US-Dollar verlangen. Es könnte so einfach sein, den von dir bereitgestellten Code anzuwenden, aber es könnte auch viel länger dauern, da ich nicht weiß, welche unerwarteten Probleme im Laufe der Arbeit auftreten könnten.

3 „Gefällt mir“
7

@Juan_Adamuz

Vielen Dank für deine Hilfe! Ich wusste zwar, wie man das HTML für die Hausanzeigen und das CSS für das Theme hinzufügt, hatte aber Schwierigkeiten, es richtig zum Laufen zu bringen. Deine Nachricht hat mir also wirklich geholfen, es besser umzusetzen.

Allerdings scheint es ein Problem zu geben. Um den Umriss herum, sowohl auf mobilen Geräten als auch auf dem Desktop, scheint hinterher noch ein weiteres Banner angezeigt zu werden, und auf der rechten Seite der Banneranzeige befindet sich ein gelber Bereich, der dort nicht sein sollte. Dieselbe Anzeige, die auf mobilen Geräten nicht angezeigt wird, erscheint auch im Bereich „Oberhalb des Beitragsstroms“ und hat dort weder den Umriss noch den gelben Teil? Hast du eine Idee, was da los ist?

Du kannst die Anzeige auf der Startseite von Unschooling(.)com sehen – wie du siehst, werden beide unten korrekt angezeigt, was darauf hindeutet, dass etwas im CSS den Umriss und den gelben Bereich verursacht.

Hier ist das HTML, das ich verwendet habe, zusammen mit dem CSS von der Seite für Hausanzeigen:

<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.