-1

Estou trabalhando em uma loja virtual e estou usando o site Nuvemshop para desenvolver a página na internet.

Só que estou enfrentando um problema ao posicionar o logo da loja no site.

Como o layout é responsivo eu preciso alinhar o logo da loja ao centro da página, então eu aplico um código de alinhamento no css na classe da imagem, mas o alinhamento no desktop fica de uma maneira e no mobile fica de outra e nunca ficam alinhados exatamente ao centro nos dois dispositivos, quando alinha em um, desalinha no outro.

Este é o código CSS que usei:

.logo-img{ width: 50%; height: 50%; margin-left: 40%;

}

E este é o link da minha página:

https://madcandydecorkids.lojavirtualnuvem.com.br/

Tentei selecionar outras classes, para ver se conseguia trabalhar com uma classe para o desktop e outra classe para o mobile, mas infelizmente todas as classes que selecionei, da maneira como fiz nenhuma resolveu este meu problema de alinhamento, aqui é minha última opção.

Se alguém puder me ajudar com isso, ficarei muito grato, desde já agradeço a toda equipe.

1 Resposta 1

0

Sua logo está centralizada! Seu container é que não tem 100% da largura, por isso da a impressão do desalinhamento

inserir a descrição da imagem aqui

Uma forma de fazer ela "centralizar" na tela é usar um text-align:center na div onde a imagem esta dentro <div id="logo" class="mobile-logo-home logo-img-container " style="text-align: center;"> e usar transform:translateX de 50% (ou seja, de 50% da largura) na imagem da logo, e retire esse margin-left:40% que tem lá não vai precisar mais.

inserir a descrição da imagem aqui

Mas obviamente vc pode precisar remover esse translate em telas menores. Para isso vc vai precisar usar media queries, sugiro que leia essa resposta, vai te ajudar com isso. Como trabalhar com media queries CSS?

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .