Como alterar o layout do pacote de produtos de horizontal para vertical no celular

Este artigo mostra como alterar o Elemento de desconto de pacote de produtos De um layout horizontal para um layout vertical em dispositivos móveis usando CSS personalizado.

 Passo 1: Abra o Editor de Código Personalizado

• No editor GemPages, passe o cursor sobre o Desconto em pacote de produtos elemento.
• Clique com o botão direito do mouse no elemento.
• Selecionar Código personalizado.

Passo 2: Adicione o código CSS

Copie e cole o seguinte CSS no editor de código personalizado:

@media (max-width: 767px) { .ElementClass gp-product-bundle-discount { display: flex; flex-direction: column; } }

Passo 3: Substitua a classe do elemento

Substituir .ElementClass com a classe CSS real do seu Desconto em pacote de produtos elemento.

Etapa 4: salvar e publicar

• Clique Economize.
• Publicar sua página.
• Abra a página ao vivo ou a Pré-visualização para verificar se o Pacote de Produtos agora é exibido em um layout vertical em dispositivos móveis.