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>
2 curtidas
9

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

1 curtida