Melhorias layout Mobile

Boa tarde Equipe @ecom

@talisson @Matheus @leonardo
Tudo certo?

Estamos em fase de lançamento do site e tem alguns ajustes bem importantes a fazer no Mobile para que o site fique com uma navegação mais fluída para os nossos clientes.

Poderiam nos ajudar a resolver esses pontos?

  1. Mobile não aparece o nome dos produtos (título)

2.Rodapé esta com pequeno Bug ao rolar a página:


3. Esta com bastante espaço nas imagens dos produtos (página de produto)

obrigado!

abs

Boa tarde, esse espaçamento tem haver com o maior tamanho das imagens que compõem o bloco. Se passar para a direita, verá que tem uma imagem do tamanho exato do bloco

Blz @Matheus, essa questão das imagens ali ok.

Dos títulos tem como corrigir para que apareça o nome do produto tb no mobile? Tem algo ocultando ali o nome dos produtos todos.

O Rodapé não da para visualizar nenhum texto, parece que o botão fica travado ao clicar e não aparece corretamente, isso pode ser corrigido de que forma?

Aguardo.

O problema ai é em relação a fonte que inseriu de forma errada, vou corrigir aqui em localhost e depois eu subo e vai normalizar

Acabei de fazer, mas você fez outra alteração por cima, então lá no CSS que inseriu, basta substituir o font-family colocado com esse aqui:

font-family: 'Gotham', sans-serif;

Show @Matheus! :muscle: :smiley: vou testar o código aqui no CSS pra ver como fica.

Do rodapé, seria essa fonte instalada incorretamente que faz com que o menu ali ao clicar fique assim dessa forma?

Sim, inclusive não é só no mobile, no desktop do safari estava assim. Testei em local com essas simples mudança e funcionou

Sem mudar as fontes que estão instaladas hj há como corrigir ?

Vocês colocaram se não me engano 5 variações de fontes, sendo que algumas delas não têm suporte para safari, quando não tem precisa ser colocado uma, no caso a do navegador a sans-serif. Se quiser pode ser feito igual na Mobifans, mas iria uniformizar em uma só

Oi Matheus, o site da popsockets.com tem incluídas exatamente as mesmas fontes que o nosso site aqui na E-com Plus popsockets.com.br, só que no nosso aqui acontece esses bugs .

Não tem como carregar as fontes igual? O que tem de diferente nesse site do exemplo para o nosso em relação as fontes?

Tem como, mas você precisa implementar igual, por exemplo a sugestão que fiz para você foi colocar o sans-serif e no deles está também com sans-serif:

font-family: GothamRounded-Medium,sans-serif; 

Porém a sua global está como Gotham, sans-serif; diferente da loja citada

Oi @Matheus testei mudar a font-family para Sans-Serif mas não deu certo, nesse momento o site está com erro no mobile, precisamos ter as fontes todas funcionando como site popsockets.com.

Como fazer para funcionar corretamente 100% essas fontes?

Tem como sim, mas precisaria que você me mapeasse melhor por exemplo, nome de produto é fonte x, nome de categoria é fonte y. Você tem 4 fontes importadas. Se conseguir especificar pra mim, é melhor do quê deixar geral igual está agora

Olá Bom dia !
@Matheus as fontes do site estão carregando todas conforme o código CSS, as fontes estão distribuídas ali no código para carregar em cada trecho da página, cabeçalho fonte X, nome do produto fonte Y e assim por diante:

body {
font-family: 'Gotham';
}
h1 {
  margin: 0 auto;
}
.header__nav a {
  font-family: 'Gotham Rounded'; 
}
.top-bar__countdown, .breadcrumb-item, .btn, .description__list {
  font-family: 'Gotham Rounded';
}
.products-carousel__title {
  font-family: 'Gotham XNarrow Ultra';
}
#product-actions .btn.share {
display: none
}
.header__row {
    display: flex !important;
    flex-direction: row !important;
  }
  .header__row .col-auto {
    order: 1 !important;
  }
  .header__row .col {
    order: 2 !important;
  }
  .header__row .d-none {
    order: 3 !important;
  }
  .header__row #search-bar {
    order: 4 !important;
  }
  .header__row .order-lg-last {
    order: 5 !important;
  }
  #search-input {
    border: solid 1px $gray-200;
  }`Texto pré-formatado`

Temos também uma marcação indicando a posição correta das fontes nos menus, descrições:

A ideia para terminar com esses bugs que as fontes estão causando no mobile é fazer carregar uma fonte somente em toda a página, ou conseguimos inserir as 4 indicando os campos corretos onde elas tem de ser carregadas pelo código?

Pode verificar se seria só isso para corrigir as fontes?

Obrigado

@Matheus As fontes inicialmente não apresentavam este problema ao carregar no Mobile, teria como identificar em qual momento elas começaram a dar problema? Foi feita alguma edição que levou a esse erro?

Boa noite, isso não tem como nós sabermos, porque não diz respeito a um problema direto em todas as máquinas, somente em produtos apple, seja macbook ou iphone. Vi alguns tópicos de pessoas reclamando de compatibilidade. Agora que me mostrou alguns, simularei no localhost no safari para testes

2 Curtidas

Oi @Matheus funcionou as fontes agora? Já podemos atualizar elas na loja?

Bom dia. @Matheus Tem algum retorno do teste realizado ?

Bom dia, não fiz os testes ainda, pretendo fazer hoje a tarde, estava verificando a questão das imagens de vocês