[PAYÉ] Rendre les annonces maison responsives

Marché
1

Que souhaitez-vous faire ?
J’ai besoin que le CSS responsive des annonces internes soit intégré à un nouveau composant de thème, afin que nos annonces internes s’affichent de manière responsive sur tous les appareils :

Actuellement, sur mobile, les annonces internes s’affichent de la même manière que sur un bureau, ce qui offre une mauvaise expérience utilisateur.

J’aurai également besoin d’aide pour ajouter le HTML responsive afin d’afficher correctement les annonces internes.

Quel est votre budget, en $ USD, que vous pouvez offrir pour cette tâche ?
Aucune idée ?

2 « J'aime »
3

Si vous lisez les publications de publicités internes, elles vous indiquent comment définir une image pour le bureau et une autre pour mobile.

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

Il suffit de définir les images pour chaque format (moins large pour les téléphones et plus large pour le bureau), et c’est tout !

Personnellement, j’utilise ces dimensions :

  • Mobile : 1282x311
  • Bureau : 755x90

Ensuite, créez un composant et ajoutez ce 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;
            }
        }
    }
}

Des dimensions étranges, mais ça fonctionne ! Vous pouvez voir cela en action ici.

Cela ne vaut pas la peine de payer pour cela… Peut-être qu’il est préférable de faire un don à Discourse !

5 « J'aime »
FKB Pro - Social theme
4

Selon la situation, cela peut valoir la peine de payer pour cela. Il est facile d’oublier que ce qui semble évident pour une personne ayant des compétences en développement web peut sembler assez complexe pour quelqu’un qui n’en a pas.

1 « J'aime »
5

Je sais, mais cette communauté est tellement géniale et la plupart des gens aideraient volontiers pour ce genre de choses :stuck_out_tongue:

1 « J'aime »
6

En effet ! Et pour vous donner une idée, je facturerais probablement entre 200 et 500 $ pour ce travail. Cela pourrait être aussi simple que d’appliquer le code que vous venez de fournir, mais cela pourrait aussi prendre beaucoup plus de temps, car je ne sais pas quelles imprévus pourraient survenir au fur et à mesure de l’avancement du projet.

3 « J'aime »
7

@Juan_Adamuz

Merci pour votre aide ! Je savais comment ajouter le HTML aux publicités maison et le CSS au thème, mais je rencontrais des difficultés pour que cela fonctionne correctement, donc votre message m’a vraiment aidé à mieux le faire.

Cependant, il semble y avoir un problème. Autour du contour, sur mobile et sur ordinateur, on dirait qu’une autre bannière s’affiche derrière, et il y a un espace jaune sur le côté droit de la bannière publicitaire qui ne devrait pas être là. La même publicité qui n’apparaît pas sur mobile s’affiche au-dessus du flux des publications et elle n’a ni ce contour ni la partie jaune ? Une idée de ce qui se passe ?

Vous pouvez voir la publicité sur la page d’accueil de Unschooling(.)com – comme vous pouvez le constater, elles s’affichent toutes les deux correctement ci-dessous, ce qui indique que quelque chose dans le CSS doit causer le contour et l’espace jaune.

Voici le HTML que j’ai utilisé ainsi que le CSS de la page des publicités maison :

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