Pergunta do WordPress GeneratePress: CSS não funciona com o iPad à luz do panorama

Um usuário perguntou ?

Olá,

Eu tenho 3 widgets de rodapé na minha página inicial. Independente da quantidade de material em cada um, eu queria que fossem do mesmo tamanho. Leo gentilmente me ajudou a conseguir isso:

@media (min-width: 769px)  {
    .site-footer .footer-widgets-container .inside-footer-widgets, .footer-widget-1, .footer-widget-3 {
    display: flex;
    }
}
/* match size of 1 & 3, to 2 */

Isso funciona conforme necessário para desktop, iPad no formato retrato e dispositivos móveis. No entanto, por algum motivo, ele não funciona para o iPad na paisagem (o widget 3 é muito grande).

Passei horas tentando várias ‘soluções’ disponíveis na internet (incluindo o link que Tom forneceu aqui: https://stackoverflow.com/questions/26861189/how-to-set-portrait-and-landscape-media-queries-in-css/26861229#26861229), mas nenhuma das partes funciona. Admito que perdi e peço ajuda, por favor ?

(@leohsiang)

10 meses atrás

Olá,

Tente também adicionar este SEC:

@media (max-width: 1024px) and (min-width: 768px) {
    .inside-footer-widgets>div {
        margin-bottom: 0;
    }
}

lançador de tópicos

(@richieps)

10 meses atrás

Oi leo

Excelente – você está definitivamente se movendo na direção certa. ?

O widget 3 agora tem a mesma altura dos widgets 1 e 2, que é o que eu queria.

No entanto, ainda é muito mais amplo do que os outros dois widgets – eles parecem ter cerca de 25% cada e 50%. Podemos descobrir que eles terão a mesma largura e a mesma altura? (Dedos cruzados!)

(@leohsiang)

10 meses atrás

Tente isto:

@media (max-width: 1024px) and (min-width: 768px) {
    .inside-footer-widgets .tablet-grid-50 {
        width: 33%;
    }
    .active-footer-widgets-1 .footer-widget-1, .active-footer-widgets-3 .footer-widget-3 {
        width: 33%;
    }
}

lançador de tópicos

(@richieps)

10 meses atrás

Oi leo

Obrigado novamente.

Isso dá a todos os 3 widgets a mesma largura, mas agora o terceiro é mais alto novamente. E, em termos de retratos de tablet, os widgets agora se empilham uns sobre os outros, em vez de um ao lado do outro.

Eu quero fazer algo que está fora dos limites do tópico? Avise-me se não for possível, porque não quero desperdiçar seu tempo.

(@leohsiang)

10 meses atrás

Você removeu o CSS do Flexbox adicionado anteriormente?

lançador de tópicos

(@richieps)

10 meses atrás

Oi leo

Desculpe, quero fazer tudo o que posso fazer sozinho, em vez de depender de você. O que tenho agora é:

@media (max-width: 599px) {
    .footer-widgets .widget > div {
        padding: 10px;
    }
}
/* Mobile */

@media (max-width: 899px)  and (min-width: 600px) {
    .footer-widgets .widget > div {
        padding: 10px;
    }
}
/* Tablet - portrait */

@media (max-width: 1199px) and (min-width: 900px) {
    .inside-footer-widgets .tablet-grid-50 {
        width: 33%;
        clear: none !important;
    }
    .active-footer-widgets-1 .footer-widget-1, .active-footer-widgets-3 .footer-widget-3 {
        width: 33%;
    }
}
/* Tablet - landscape */

@media (min-width: 1200px)  {
    .site-footer .footer-widgets-container .inside-footer-widgets, .footer-widget-1, .footer-widget-3 {
    display: flex;
    }
}
/* Desktop */

Com isso, as apresentações em dispositivos móveis, desktops e retratos são como eu quero. A apresentação de paisagem do tablet está quase lá; é só que o terceiro widget é exibido no próximo conjunto em vez de ao lado do segundo widget.

Obrigado Richie

(@leohsiang)

10 meses atrás

É difícil escrever muitas perguntas da mídia para atender a todos os tablets no modo retrato e paisagem.

Esta é a pergunta?

Nesse caso, você verá que a SEC específica ainda não foi quebrada.

lançador de tópicos

(@richieps)

10 meses atrás

Oi leo

Sim, parece que o cache não foi limpo por algum motivo, agora é.

Acho que o formato Shared Counts está aumentando nossos problemas. Modifiquei isso para que agora haja apenas uma margem de 1px entre os botões.

As coisas estão bem próximas agora. Se você não tem outras palavras de sabedoria, posso deixar as coisas como estão agora e voltar a elas mais tarde ?

lançador de tópicos

(@richieps)

10 meses atrás

Ideia bônus…

Seria mais fácil, mais difícil ou algo diferente se eu abandonasse completamente os widgets de rodapé e apenas usasse GenerateBlocks para adicionar um contêiner de 3 colunas à parte inferior da página e adicionar conteúdo dessa maneira?

lançador de tópicos

(@richieps)

10 meses atrás

Oi leo

encomendado ?

Devo admitir que não estou inteiramente certo por que o seguinte funciona. Eu mudei as partes que flexionam desde que os widgets 3 eram os maiores, então eu mudei para que 1 e 2 fossem flexionados.

De qualquer forma, obrigado por toda a sua ajuda para encontrar a solução definitiva.

@media (max-width: 1199px) and (min-width: 900px) {
    .inside-footer-widgets > .tablet-grid-50 {
        width: 33.3333%;
    }
    .site-footer .footer-widgets-container .inside-footer-widgets, .footer-widget-1, .footer-widget-2 {
    	display: flex;
    }
    .inside-footer-widgets > div {
    	margin-bottom: 0;
    }
}
/* Tablet - landscape */ 

(@leohsiang)

10 meses atrás

Estou feliz que você descobriu!

A questão da mídia requer muita tentativa e erro 🙂

lançador de tópicos

(@richieps)

9 meses atrás

Atualização rápida (caso alguém tenha problemas semelhantes)…

Olhando para a formatação aqui para a entrada de Contagens Compartilhadas no widget de texto de rodapé 3, e um pouco frustrado pelas tentativas fracassadas de alterar a SEC, encontrei um link do autor do plug-in:

O ponto chave aqui é que você pode alterar o atributo “local”. Modifiquei a entrada de atalho no widget de texto para ler: [shared_counts location=”RR-sharedcounts” style=”buttons”]. Eu então usei o seguinte CSS para obter o espaçamento que eu queria:

.RR-sharedcounts {
  display: flex;
  justify-content: space-between;
}

(@leohsiang)

9 meses atrás

Obrigado por compartilhar!

Isto foi útil?

0 / 0

Deixe uma resposta 0

O seu endereço de email não será publicado. Campos obrigatórios são marcados *