1

Tenho o site abaixo:

http://funerariasaopedro.net.br/novo/

Nele tem um slider, no inicio da página. Nesse slider tenho uma imagem (logo) e uma ul (que contem algumas atividades).

O que ocorre é que quando reduzo o tamanho do navegador (resolução da tela), tudo acompanha. Mas o tamanho da imagem e da ul não reduz embora o tamanho do slide show reduza.

Sim, fiz o @media query.

@media screen and (min-width: 0px) and (max-width:1023px) {
    .cycle-slideshow .logo-atividades .logo{
        width:10% !important;
    }
    .cycle-slideshow .logo-atividades .atividades ul li a {
    font-size: .1rem !important;
    font-weight : auto  !important;
    line-height : auto !important;
    }
}
1
  • Carlos editei minha resposta e acho que resolvi sei problema, depois olha na resposta os detalhes e testa ai
    – hugocsl
    Commented 24/04/2018 às 23:14

1 Resposta 1

1

Edit

Os problemas dos espaços sobrando a direita do site eu corrigi fazendo um overflow-x:hidden no html e body, e depois colocando box-sizing:border-box nos elementos coma a class .aos-item para o padding deles não interferirem no layout.

html, body {
    overflow-x: hidden;
}
.aos-item {
    display: inline-block;
    float: left;
    width: 50%;
    height: 300px;
    box-sizing: border-box;
    padding: 20px;
}

Pelo que eu vi esses CSS deve resolver o problema do alinhamento e do tamanho da logo.

OBS: Vc vai ter que fazer outras variações de media quary @media para tratar a altura da UL em algumas larguras de tela .cycle-slideshow .logo-atividades .atividades Deixe a observação no código abaixo.

.cycle-slideshow .logo-atividades {
    position: absolute;
    top: 0;
    left: 50%;
    max-width: 500px;
    height: 305px;
    text-align: center;
    overflow: hidden;
    z-index: 999;
    transform: translateX(-50%);
}

.cycle-slideshow .logo-atividades .atividades {
    position: absolute;
    top: 20%; /* aqui vc controla a altura da UL de acordo com a largura da tela*/
    width: 100%;
    height: 115px;
    overflow: hidden;
    pointer-events: none;
    text-align: center;
    z-index: 10;
    color: #FFF;
}

Agora sobre o espaço que vai sobrando do lado direito é devido a esse JS que vc usou nas suas <sections>, tanto que depois que vc colocar esse CSS acima e remover as sections vc vai ver que o bug some

Esse elementos com a classe AOS que vem entrando da direita e esquerda data-aos="fade-right" acredito que estejam bugando a largura da tela e dando o epaso branco no topo, retire eles e o bug some tb...

0

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 .