[PAGO] Torne os anúncios caseiros responsivos

Mercado
1

O que você gostaria que fosse feito?
Preciso que o CSS responsivo dos House Ads seja adicionado a um novo componente de tema, para que nossos House Ads sejam exibidos de forma responsiva em todos os dispositivos:

Atualmente, no mobile, os House Ads são exibidos da mesma forma que no Desktop, resultando em uma experiência ruim para o usuário.

Também precisarei de ajuda para adicionar o HTML responsivo para popular os House Ads corretamente.

Qual é o seu orçamento, em $ USD, que você pode oferecer para esta tarefa?
Não faz ideia?

2 curtidas
3

Se você ler o post sobre anúncios internos (House ads), verá que eles explicam como definir uma imagem para desktop e outra para mobile.

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

Basta definir as imagens para cada uma (menor largura para celulares e maior para desktop) e pronto!

Eu pessoalmente uso estas dimensões:

  • Mobile: 1282x311
  • Desktop: 755x90

Depois, crie um componente e adicione este 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;
            }
        }
    }
}

Dimensões estranhas, mas funcionam! Você pode ver em ação aqui.

Não vale a pena pagar por isso… Talvez seja melhor doar para o Discourse!

5 curtidas
FKB Pro - Social theme
4

Dependendo da situação, pode valer a pena pagar por isso. É fácil esquecer que o que parece óbvio para alguém com experiência em desenvolvimento web pode parecer bastante complexo para quem não tem essa formação.

1 curtida
5

Eu sei, mas essa comunidade é tão incrível e a maioria das pessoas ajudaria com essas coisas :stuck_out_tongue:

1 curtida
6

Com certeza! E para ter uma referência, eu provavelmente cobraria entre US$ 200 e 500 pelo serviço. Pode ser que seja tão simples quanto aplicar o código que você acabou de fornecer, mas também pode acabar levando muito mais tempo, já que não sei quais imprevistos podem surgir conforme o trabalho avança.

3 curtidas
7

@Juan_Adamuz

Obrigado pela sua ajuda! Eu sabia como adicionar o HTML aos House Ads e o CSS ao Tema, mas estava com dificuldade para fazer funcionar corretamente, então sua mensagem realmente me ajudou a melhorar.

No entanto, parece haver um problema. Ao redor do contorno, tanto no mobile quanto no desktop, parece que outro banner está aparecendo atrás dele, e há um espaço amarelo no lado direito do banner publicitário que não deveria estar lá. O mesmo anúncio que não aparece no mobile é exibido acima do fluxo de postagens, e ele não tem esse contorno ou a parte amarela? Alguma ideia do que está acontecendo?

Você pode ver o anúncio na página inicial do Unschooling(.)com - como você pode ver, ambos aparecem corretamente abaixo, o que me diz que algo no CSS deve estar causando o contorno e o espaço amarelo.

Aqui está o HTML que usei junto com o CSS da página House Ads:

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