[PAGADO] Hacer los anuncios internos responsivos

Mercado
1

¿Qué te gustaría que hiciera?
Necesito que el CSS responsivo de los anuncios internos se agregue a un nuevo componente de tema para que nuestros anuncios internos se muestren de forma responsiva en todos los dispositivos:

Actualmente, en móviles, los anuncios internos se muestran igual que en escritorio, lo que genera una mala experiencia de usuario.

También necesitaré ayuda para agregar el HTML responsivo para que los anuncios internos se carguen correctamente.

¿Cuál es tu presupuesto, en USD, que puedes ofrecer por esta tarea?
¿No tienes idea?

2 Me gusta
3

Si leen la publicación de anuncios internos, les muestran cómo configurar una imagen para escritorio y otra para móvil.

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

Simplemente establezcan las imágenes para cada una (menos ancho para teléfonos y más ancho para escritorio) y ¡listo!

Personalmente uso estas dimensiones:

  • Móvil: 1282x311
  • Escritorio: 755x90

Luego creen un componente y agreguen 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;
            }
        }
    }
}

Dimensiones extrañas, ¡pero funcionan! Pueden verlas en acción aquí

No vale la pena pagar por esto… Quizás sea mejor donar a Discourse!

5 Me gusta
FKB Pro - Social theme
4

Dependiendo de la situación, podría valer la pena pagar por esto. Es fácil olvidar que lo que parece obvio para alguien con experiencia en desarrollo web puede resultar bastante complejo para alguien sin ese conocimiento.

1 me gusta
5

Lo sé, pero esta comunidad es genial y la mayoría de la gente ayudaría con estas cosas :stuck_out_tongue:

1 me gusta
6

¡Exacto! Y como referencia, probablemente cobraría entre 200 y 500 dólares por el trabajo. Podría ser tan sencillo como aplicar el código que acabas de proporcionar, pero también podría terminar tomando mucho más tiempo, ya que no sé qué imprevistos podrían surgir a medida que avanza el trabajo.

3 Me gusta
7

@Juan_Adamuz

¡Gracias por tu ayuda! Ya sabía cómo agregar el HTML a los anuncios propios y el CSS al tema, pero tenía problemas para que funcionara correctamente, así que tu mensaje me ayudó mucho a mejorarlo.

Sin embargo, parece haber un problema. Alrededor del contorno, tanto en móviles como en escritorio, parece que se muestra otro banner detrás y hay un espacio amarillo en el lado derecho del anuncio que no debería estar ahí. El mismo anuncio que no se muestra en móviles aparece en la sección “Arriba del flujo de publicaciones” y no tiene ese contorno ni la parte amarilla. ¿Tienes alguna idea de qué está pasando?

Puedes ver el anuncio en la página principal de Unschooling(.)com. Como puedes observar, ambos se muestran correctamente abajo, lo que me indica que algo en el CSS debe estar causando el contorno y el espacio amarillo.

Aquí está el HTML que usé junto con el CSS de la página de anuncios propios:

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