Centralização do menu superior

Layout
1

Meu menu superior tem 6 itens e ele fica alinhado à esquerda e sobra muito espaço na direita. Alguém sabe como centralizar?

2

Faz um teste inserindo esse código CSS na sua loja:

#cabecalho > div.conteiner > div.menu.superior > ul {
    display: flex;
    justify-content: center;
}
2 curtidas
3

De certo! Muito obrigada!!!

2 curtidas
4

@Jose_Claudio_Alvarez no meu caso é diferente gostaria que as imagens e textos ficasse mais proximos está muito pequeno no mobile, deixo com 4 produtos no desktop

image
image1340×624 167 KB

5

Tenta adicionar esse CSS para ver se melhora a visibilidade no mobile:

@media only screen and (max-width: 767px) {
    /*Faz o produto ocupar a tela inteira no mobile*/
    .listagem .listagem-item .imagem-produto, .listagem .listagem-item .info-produto {
        width: 100%;
    }
    /*Centraliza botão*/
    .acoes-produto-responsiva {
        text-align: center;
    }
    /*Retira margem esquerda excessiva*/
    .listagem .listagem-item .acoes-produto-responsiva {
        margin: 0 0 0 0;
    }
    /*Aumenta tamanho do título do produto*/
    .listagem .listagem-item .nome-produto {
        font-size: 1.2rem;
    }
    /*Aumenta texto em vermelho do preço*/
    .preco-produto strong.titulo, .resumo-compra .preco-produto .titulo, .resumo-compra .total strong {
        font-size: 1.5rem;
    }
    /*Aumenta text das parcelas*/
    .listagem-linha .preco-produto .preco-parcela {
        font-size: 1.1rem;
    }
    /*Aumenta tamanho da fonte das informações do produto*/
    .listagem-linha .preco-produto {
        font-size: 1.3rem;
    }
}
1 curtida
6

Não é no mobile, no Desktop mesmo.
No mobile está ok.

1 curtida
7

Então faz um teste com esse CSS:

@media only screen and (min-width: 767px) {
    /*Aumenta tamanho da imagem*/
    .listagem .span3 .imagem-produto, .listagem .produtos-carrossel[data-produtos-linha="4"] .imagem-produto {
        height: 250px;
    }
    /*Faz o produto ocupar a tela inteira*/
    .listagem .listagem-item .imagem-produto, .listagem .listagem-item .info-produto {
        width: 100%;
    }
    /*Centraliza botão*/
    .acoes-produto-responsiva {
        text-align: center;
    }
    /*Retira margem esquerda excessiva*/
    .listagem .listagem-item .acoes-produto-responsiva {
        margin: 0 0 0 0;
    }
    /*Aumenta tamanho do título do produto*/
    .listagem .listagem-item .nome-produto {
        font-size: 1.2rem;
    }
    /*Aumenta texto em vermelho do preço*/
    .preco-produto strong.titulo, .resumo-compra .preco-produto .titulo, .resumo-compra .total strong {
        font-size: 1.5rem;
    }
    /*Aumenta text das parcelas*/
    .listagem-linha .preco-produto .preco-parcela {
        font-size: 1.1rem;
    }
    /*Aumenta tamanho da fonte das informações do produto*/
    .listagem-linha .preco-produto {
        font-size: 1.3rem;
    }
}

Aí é só ir alterando os valores numéricos até os textos e as imagens ocuparem o espaço desejado.

4 curtidas
8

Deu certo, muito obrigado! :pray:t5:

2 curtidas
9

Eu atualizei o código porque do jeito que estava ele ia afetar o mobile também. Atualiza aí na sua loja também.

1 curtida
10

Esse mesmo né

@media only screen and (min-width: 767px) {
/*Aumenta tamanho da imagem*/
.listagem .span3 .imagem-produto, .listagem .produtos-carrossel[data-produtos-linha="4"] .imagem-produto {
    height: 250px;
}
/*Faz o produto ocupar a tela inteira*/
.listagem .listagem-item .imagem-produto, .listagem .listagem-item .info-produto {
    width: 100%;
}
/*Centraliza botão*/
.acoes-produto-responsiva {
    text-align: center;
}
/*Retira margem esquerda excessiva*/
.listagem .listagem-item .acoes-produto-responsiva {
    margin: 0 0 0 0;
}
/*Aumenta tamanho do título do produto*/
.listagem .listagem-item .nome-produto {
    font-size: 1.2rem;
}
/*Aumenta texto em vermelho do preço*/
.preco-produto strong.titulo, .resumo-compra .preco-produto .titulo, .resumo-compra .total strong {
    font-size: 1.5rem;
}
/*Aumenta text das parcelas*/
.listagem-linha .preco-produto .preco-parcela {
    font-size: 1.1rem;
}
/*Aumenta tamanho da fonte das informações do produto*/
.listagem-linha .preco-produto {
    font-size: 1.3rem;
}

}

2 curtidas
11

Isso, esse mesmo com o @media only screen and (min-width: 767px), é essa linha no início que deixa os códigos exclusivos para o desktop.

2 curtidas
12

Show, muito obrigado mais uma vez! :handshake:

2 curtidas
13

Valeu Aline funcionou,

1 curtida