Banner Carrinho Mobile

Layout
1

Bom dia, alguém pode me ajudar a ajustar o banner do carrinho no mobile? Tenho ele pra desktop, está legal, mas no mobile fica pequeno.

1 curtida
2

Bom dia! Qual seria o banner do carrinho? Aqui está normal, poderia enviar um print?

3

Bom dia, seguem os prints.

Aqui é como ele fica no mobile:
image

Eu queria que ficasse assim (print abaixo), como na página do produto. Resumindo, seriam dois banners com medidas diferentes, um pra desktop e outro pro mobile.

image

5

Esse é o código que utilizo para o banner no carrinho:

<script> $(function(){ $(".cabecalho-interno .titulo").append('<img src="https://i.postimg.cc/bNwbY69Q/tarja-carrinho-jun22-1.gif" style="margin: 10px 0 -10px 0;">') }); </script>

Rodapé, Página do Carrinho, HTML

6

consegue me ajudar Matheus?

1 curtida
7

Amigo, desculpa a demora. Vou fazer aqui pra você!

8

Nesse caso Alexandre, como vai funcionar: você pediu 2 banners, então serão 2 banners. Um para desktop e outro para mobile. No código, vai ter a imagem em IMGUR (altere o link para o novo banner mobile), recomendo desenvolver um novo banner para o mobile, nas dimensões que você quiser.

Explicando a funcionalidade:
Toda vez que o tamanho da página ultrapassar as dimensões de 767px, o banner de desktop aparecerá. Toda vez que as dimensões forem menor que 768px, o banner mobile aparecerá.

Instalação:

  1. Incluir código HTML
  2. Rodapé
  3. Página do Carrinho
  4. HTML
<script> 
    $(document).ready(function () { 
        $(".cabecalho-interno .titulo").append('<div class="bannercartdesktop"><img src="https://i.postimg.cc/bNwbY69Q/tarja-carrinho-jun22-1.gif" style="margin: 10px 0 -10px 0;"></div>')
        $(".cabecalho-interno .titulo").append('<div class="bannercartmobile"><img src="https://i.imgur.com/uPTgpaJ.png" style="margin: 10px 0 -10px 0;"></div>')});
    </script>
        
        
<style>
    @media only screen and (max-width: 767px)
    {
        .bannercartdesktop {
            display: none;
        }
    }
    
    @media only screen and (min-width: 768px)
    {
        .bannercartmobile {
            display: none;
        }
    }
</style>
3 curtidas
9

Você é o cara. Muito obrigado, funcionou perfeitamente. Agradeço demais, valeu Matheus!

1 curtida
10

Como eu faço para que ao clicar no link, seja direcionada para um pagina, como os outros banners?

1 curtida
11

Coloca a tag de <img src> dentro de um HREF. Vou dar um exemplo abaixo.

<a href="seu link" <img src=""> </a>
12

Ficaria assim:

@media only screen and (max-width: 767px) { .bannercartdesktop { display: none; } } @media only screen and (min-width: 768px) { .bannercartmobile { display: none; } }
13

Conferi aqui e está certo, só tem que adicionar o HREF como eu falei. Só colocar o seu link onde destaquei “SEU LINK”.

Vai ficar assim:

<script> 
    $(document).ready(function () { 
        $(".cabecalho-interno .titulo").append('<div class="bannercartdesktop"><a href="SEU LINK"><img src="https://cdn.awsli.com.br/413/413969/arquivos/capa-de-facebook-para-churrascaria-r-stico-branco-preto-e-laranja--1920-x-500-px.png", style="margin: 10px 0 -10px 0;"></a></div>')
        $(".cabecalho-interno .titulo").append('<div class="bannercartmobile"><a href="SEU LINK"><img src="https://cdn.awsli.com.br/413/413969/arquivos/capa-de-facebook-para-churrascaria-r-stico-branco-preto-e-laranja--1920-x-500-px.png" style="margin: 10px 0 -10px 0;"></a></div>')});
    </script>
        
        
<style>
    @media only screen and (max-width: 767px)
    {
        .bannercartdesktop {
            display: none;
        }
    }
    
    @media only screen and (min-width: 768px)
    {
        .bannercartmobile {
            display: none;
        }
    }
</style>