[PAID] Rendi responsive gli annunci interni

Mercato
1

Cosa vorresti che facessi?
Devo aggiungere il CSS responsive per gli annunci interni a un nuovo componente del tema, in modo che gli annunci interni si visualizzino correttamente su tutti i dispositivi:

Attualmente, su mobile, gli annunci interni vengono visualizzati esattamente come su desktop, creando una scarsa esperienza utente.

Avrò inoltre bisogno di aiuto per aggiungere l’HTML responsive per popolare correttamente gli annunci interni.

Qual è il tuo budget, in dollari USA, che puoi offrire per questo compito?
Non ne hai idea?

2 Mi Piace
3

Se avete letto il post sulle pubblicità interne, vi mostrano come impostare un’immagine per desktop e una per mobile.

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

Basta impostare le immagini per ciascuno (meno larghezza per i telefoni e più larghezza per desktop) ed è tutto!

Personalmente uso queste dimensioni:

  • Mobile: 1282x311
  • Desktop: 755x90

Poi create un componente e aggiungete questo 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;
            }
        }
    }
}

Dimensioni strane, ma funzionano! Potete vederle in azione qui

Non vale la pena pagare per questo… Forse è meglio donare a Discourse!

5 Mi Piace
FKB Pro - Social theme
4

A seconda della situazione, potrebbe valere la pena pagare per questo. È facile dimenticare che ciò che sembra ovvio a una persona con una formazione nello sviluppo web può sembrare piuttosto complesso per qualcuno che non ha alcuna esperienza in materia.

1 Mi Piace
5

Lo so, ma questa community è fantastica e la maggior parte delle persone aiuterebbe con queste cose :stuck_out_tongue:

1 Mi Piace
6

Davvero! E come riferimento, probabilmente chiederrei tra i 200 e i 500 dollari per il lavoro. Potrebbe essere semplice quanto applicare il codice che hai appena fornito, ma potrebbe anche richiedere molto più tempo, dato che non so quali imprevisti potrebbero sorgere mentre il lavoro procede.

3 Mi Piace
7

@Juan_Adamuz

Grazie per il tuo aiuto! Sapevo già come aggiungere l’HTML agli annunci domestici e il CSS al tema, ma avevo difficoltà a farli funzionare correttamente, quindi il tuo messaggio mi ha davvero aiutato a migliorare.

Tuttavia, sembra esserci un problema. Intorno al contorno, sia su mobile che su desktop, sembra che ci sia un altro banner che appare dietro di esso e c’è uno spazio giallo sul lato destro dell’inserzione che non dovrebbe esserci; lo stesso annuncio che non viene visualizzato su mobile appare nella sezione “Sopra il flusso dei post” e non ha quel contorno o la parte gialla? Hai idea di cosa stia succedendo?

Puoi vedere l’annuncio nella homepage di Unschooling(.)com - come puoi notare, entrambi vengono visualizzati correttamente qui sotto, il che mi fa pensare che qualcosa nel CSS stia causando il contorno e lo spazio giallo.

Ecco l’HTML che ho utilizzato insieme al CSS dalla pagina degli annunci domestici:

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