CSS em linguagem simples: por que o site «quebra» no celular e como isso afeta as vendas
CSS (Cascading Style Sheets) é a linguagem de estilo do site: cores, fontes, espaçamentos, layout dos blocos e adaptação à tela do telefone. Se o HTML define o «esqueleto» da página e o JavaScript o comportamento de botões e formulários, o CSS responde por como tudo aparece no monitor e no bolso do cliente. Quando o dono diz «o site quebra no celular», quase sempre a culpa são os estilos: largura fixa, texto pequeno, botão «Comprar» fora da tela, rolagem horizontal, formulário impossível de preencher com o polegar. Em 2026, mais da metade dos leads em sites comerciais vem do mobile - layout ruim atinge a conversão diretamente, não «arrumamos depois».
- CSS - estilo: cores, fontes, grade, adaptação a telas diferentes
- «Quebra» - scroll horizontal, blocos sobrepostos, texto cortado, botões fora da área de toque
- Por que o dono precisa - cliente mobile não espera «versão desktop», vai ao concorrente
- Conjunto - HTML (estrutura) + CSS (visual) + JS (interatividade); sem CSS a página é texto cru
- Risco principal - mockup lindo no Figma no desktop e carrinho quebrado no iPhone
CSS em linguagem simples
CSS é um conjunto de regras para o navegador: «título - 24 pixels e azul», «botão - largura total no celular», «menu lateral - esconder em telas menores que 768 pixels». Não é programação no sentido usual - você descreve a aparência, não a lógica de negócio.
| Camada | O que faz | Analogia |
|---|---|---|
| HTML | Títulos, texto, formulários, links | Estrutura do prédio |
| CSS | Cores, fontes, margens, grade, responsivo | Acabamento e planta |
| JavaScript | Carrinho, slider, validação | Elevador, alarme, luz |
| PHP / backend | Pedidos, pagamento, banco de dados | Instalações atrás da parede |
Importante: o contratado pode mostrar site perfeito no notebook - e 70% dos visitantes veem outra coisa no celular se o CSS não estiver ajustado.
Por que o site «quebra» no celular
«Quebra» é o jeito informal de falar de problemas de layout responsivo. Sintomas e causas CSS típicas:
Rolagem horizontal
Barra de rolagem lateral - o usuário vê o site «cortado». Mais comum:
- bloco com largura fixa (ex. 1200 px) sem
max-width: 100%; - tabela de preços ou catálogo não se reorganiza em tela estreita;
- banner ou vídeo mais largo que a tela do telefone.
Blocos sobrepostos
Texto cobre botão, preço fica sob a foto, menu cobre o título:
- elementos com posicionamento absoluto «como no mockup 1920 px»;
- faltam margens em telas pequenas;
- fonte não encolhe e o container não cresce - conteúdo transborda.
Texto e botões pequenos
No celular não dá para ler condições de entrega nem acertar «Finalizar pedido»:
- texto base menor que 14-16 px;
- botões menos de 44 px de altura;
- links do rodapé colados - erro e saída.
Versão «desktop» no mobile
O site abre mas tudo é pequeno - precisa dar zoom:
- sem viewport no HTML;
- subdomínio m. separado sem redirecionamentos;
- template antigo sem media queries.
O que checar em 5 minutos sem código
- Abra o site no seu próprio celular.
- Percorra início - catálogo - produto - carrinho - pagamento.
- Gire vertical e horizontal - nada deve quebrar.
- Preencha o formulário com uma mão.
- Compare com um concorrente do mesmo nicho.
Como mobile quebrado afeta vendas
Não é estética - é dinheiro e leads.
| Sintoma mobile | Comportamento | Impacto |
|---|---|---|
| Scroll horizontal | Irritação, fecha em 3-5 s | Lead perdido |
| Botão «Comprar» invisível | Busca «comprar X perto» | Venda ao concorrente |
| Formulário não cabe | Abandono no meio | Menos leads de ads e SEO |
| Carga lenta por CSS/fontes pesadas | Espera 4+ s no 4G | Até 40% saem antes de carregar |
| Preços ilegíveis | Desconfiança | Menos conversão |
Números de referência:
- 53%+ das sessões e-commerce em alguns nichos são mobile.
- Google usa indexação mobile-first: mobile pior = ranking e leads orgânicos piores.
- Corrigir CSS crítico no checkout costuma dar +10-30% pedidos sem aumentar ads.
Prática: meça leads do mobile, não só visitas. Desktop 4% e mobile 0,8% - quase certo que é layout, velocidade ou UX.
Responsivo, mobile separado e app
Design responsivo
Um site, CSS reorganiza blocos. Prós: uma URL para SEO. Contras: CSS bem feito desde o início.
Versão mobile separada
Segundo conjunto de páginas. Contras: dois códigos, preços dessincronizados.
PWA / «app»
Faz sentido com compras repetidas; para landing, muitas vezes excesso.
| Abordagem | Quando | Orçamento |
|---|---|---|
| CSS responsivo | Site novo, WordPress | Incluso em bom layout |
| Correções CSS | Tráfego existe, conversão mobile caiu | $500 - $3 000 |
| Redesign completo | Marca velha, rejeição mobile > 60% | $3 000 - $15 000+ |
| App nativo | Centenas de milhares MAU | A partir de $15 000 |
Regra: para a maioria das PMEs em 2026 basta um site responsivo com CSS testado nas páginas-chave.
O que perguntar na entrega
- Quais páginas testaram no mobile?
- Relatório PageSpeed / Core Web Vitals mobile?
- Uma URL para todos os dispositivos?
- Quem edita CSS depois?
- Garantia de layout mobile no termo de aceite.
Auditoria SEO com bloco mobile usability encontra problemas CSS que cortam conversão.
Erros típicos do dono
- Só olhar desktop na entrega.
- Exigir pixel-perfect no celular quando simplificar aumenta conversão.
- Adicionar widgets sem testar no mobile.
- Economizar em layout e gastar em ads.
- Trocar tema WordPress sem testar checkout mobile.
Resumo
CSS é como o site parece e se funciona no telefone. «Quebra» quase sempre são estilos e responsivo. Na era mobile-first, layout ruim = perda direta de vendas.
Vale:
- testar jornada de compra em celular real antes de pagar;
- comparar conversão desktop vs mobile;
- exigir CSS responsivo em uma URL;
- não sacrificar velocidade no 4G por efeitos da moda.
Bom CSS é invisível - o cliente compra. CSS ruim: você paga ads e SEO e metade vê vitrine quebrada.
Perguntas frequentes
CSS e HTML são a mesma coisa?
Não. HTML é estrutura; CSS é estilo. Sem HTML não há o que estilizar; sem CSS a página parece dos anos 90.
Por que no PC funciona e no celular quebra?
Monitor grande comporta largura fixa; em 390 px os mesmos estilos não se adaptam. Falta media queries, tabelas largas, viewport antigo.
Dá para consertar o mobile sem refazer tudo?
Muitas vezes sim - CSS pontual em início, catálogo e checkout. Em sites muito antigos compare remendo vs template novo.
Afeta posição no Google?
Sim. Mobile-friendly, Core Web Vitals, sinais comportamentais. Yandex também valoriza mobile.
Quanto custa layout responsivo decente?
Landing $800 - $2 500; corporativo $2 500 - $8 000; loja custom $5 000 - $20 000+; carrinho mobile em WordPress $500 - $2 000. Reserve 10-15% para testes em dispositivos reais.