post

Criar Slide Usando Apenas Containers no Elementor com CSS

Publicado em: 08/09/2023

Categorias: BlogCSSElementorWordpress

Estrutura de containers para utilizar o código:

Depois, no containers master, aplique o seguinte código CSS:

Código:

/* slide-custom-mobile */
:root .slide-custom-mobile {
    --margin-body: 20px;
    --margin-mentivado: calc(0px - var(--margin-body));
    --margin-x2: calc(var(--margin-body) * 2);
}

@media (max-width: 1024px) {
    .slide-custom-mobile {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        width: calc(100% + var(--margin-x2));
        margin-left: var(--margin-mentivado);
    }
    
    .slide-custom-mobile > div {
        flex: 60% 0 0 !important;
    }
}

@media (max-width: 767px) {
    .slide-custom-mobile {
        width: calc(100% + var(--margin-x2));
        margin-left: var(--margin-mentivado);
    }
    
    .slide-custom-mobile > div {
        flex: 85% 0 0 !important;
    }
}

O código acima vai transformar os containers em slide na versão para tablet e mobile. Se precisar, pode atualizar o código para suas necessidades.

Link de compartilhamento

Compartilhe esse conteudo nas redes sociais ou por mensagem usando o link curto abaixo. Basta clicar em cima do link para copiar.

bruno.art.br/pb/3164

ID de Referência: 3164

Sugira uma publicação

Envie uma mensagem para mim, e sugira alguma publicação de algum tema que tenha dificuldades de resolver.

Clique aqui e entre em contato


Comentários