Ajuda Pessoal Para Solução de Código | HTML e CSS | Alura

3
respostas

por Shellen Lorreny Miranda

| 97k xp | 82 posts

Olá pessoal, boa tarde.

Estou fazendo um trabalho e o que aprendi até agora tem me ajudado muitoooo, quero pedir que me ajudem em uma coisa, por favor....

Estou precisando ajustar uma informação em dispositivo mobile, segue o que deve ser feito para teste local:

1° Ao inspesionar elemento, clicando no menu, será possível localizar a informação, conforme o print:

http://prntscr.com/i2a2xx

2° Colocar a instrução na opção Edit as HTML:

http://prntscr.com/i2a3g5

3° Colocar a informação:

<div class="text_mobile"><span>A maxiadesivos é uma empresa que trabalha com Papel de Parede Autocolante.
Em nosso site você pode ver todos os nossos modelos, para personalizar o seu ambiente
Para mais informações use o menu...</span></div>

Ficará desta foma:

http://prntscr.com/i2a48g

4° Ao clicar no +, será "criado" um css para formatar a classe:

http://prntscr.com/i2a4ii

5° Jogar a informação:

.text_mobile {
    z-index: 1111111;
    background: #000000a6;
    width: 90%;
    height: 40%;
    position: fixed;
    padding: 20px !important;
    display: block;
}

Ficará assim: http://prntscr.com/i2a56i

Até ai Ok, está da forma que eu quero, porém ao clicar no menu as informações do menu aparecem atras e a informação do menu preciso que apareça a frente, alguém pode por favor me ajudar, já usei um monte de z-index, mas ele não funciona para mim, estou precisando muito de uma ajuda nesta parte, eEu sei que não tem relação com o curso mas conto com a ajuda de vocês.

Ver como está aparecendo:

http://prntscr.com/i2a5mt

Observação: estes testes são locais!!!!

Estou testando local para depois jogar no ambiente oficial...

Por favor me ajudem não to sabendo fazer, obrigada mesmo, aguardo um retorno com a solução do que fazer =)

3 respostas

por ricardoaugusto21k

| 284.5k xp | 226 posts

18/01/2018

z-index e outras propriedades estão sendo sobrepostas várias vezes. Tenta dar uma organizada nesses plugins que estão sendo utilizados.

Alterei usando o inspector usando !important e, pelo menos no site que tá no ar, funcionou:

.cbp-spmenu-bottom.cbp-spmenu-open, .cbp-spmenu-top.cbp-spmenu-open {
    top: 42px!important;
    z-index: 999999 !important;
}

arquivo https://maxiadesivos.com.br/wp-content/cache/wpfc-minified/c5a635902258d8e03a9506d20ea16533/1516305244index.css na linha 1086.

por Shellen Lorreny Miranda

| 97k xp | 82 posts

19/01/2018

Obrigada pelo retorno, vou testar local primeiro desta forma, colocando z-index "importante", ontem até consegui fazer o procedimento com um outro código mais personalizado, mas ao testar no dispositivo móvel da sansung os slides não apareceram, ai tive que retirar, pois gerou outros erros também.

                        <div class="caixa">
                        <p>A Maxiadesivos é uma empresa que trabalha com Papel de Parede Autocolante.
                        Em nosso site você pode ver todos os nossos modelos, para personalizar o seu ambiente!!!<br>
                        Utilize o MENU para conhecer nossos produtos!!!</p>
                        <div class="arrow up"></div>
                        <div class="arrow up-b"></div>
                        </div>

Segue o código utilizado:

/* Personalizar no mobile a ordem para aparecer o item ----------- */
@media only screen and (max-width: 767px) and (min-width: 375px){

.caixa {
    height: 45%;
    background: #000000a6;
    border: 5px solid #ffeeeecc;
    margin-top: 30px !important;
    position: fixed;
    padding: 20px!important;
    color: #f7f1f1;
    font-size: 15px !important;
    margin-right: 20px !important;
}

.arrow {
position: absolute;
font-size: 0;
line-height: 0;
width: 0;
height: 0;
z-index: 1111111;
border: solid transparent;
}

.up, .up-b {
left: 10px;
border-width: 24px;
top: -25px;
border-bottom-color: #ffeeeec7;
border-top-width: 0;
}

.up-b {

border-width: 20px;
top: -20px;
left: 14px;
border-bottom-color: #000000a6; 
border-top-width: 0;
}

div#page_content_wrapper {
    z-index: 222222;
    position: absolute;
    top: 0;
}

#mg-wprm-wrap.cbp-spmenu.cbp-spmenu-vertical.cbp-spmenu-top.cbp-spmenu-open {
    z-index: 333333;
}

.cbp-spmenu-push .cbp-spmenu-top #wprmenu_menu_ul {
    padding: 0px 12px !important;
}

}
/* Ajustes mobile fim - referente ao menu ----------- */
/* Fim ----------- */

por Shellen Lorreny Miranda

| 97k xp | 82 posts

19/01/2018

Encontrei outro problema...

Para ver acesse por exemplo a página "https://maxiadesivos.com.br/papel-de-parede-auto-adesivo-arvores/", ao acessar cliente em uma das opções das imagens para a galeria abrir.

Exemplo imagem 1: http://prntscr.com/i2lq0e

Após clicar é aberto as miniaturas, menos a imagem para sua visualização, conforme acontece pelo desckhttp:

Exemplo imagem 2: http://prntscr.com/i2lqzh

Porém identifiquei que ao clicar no menu a imagem aparece, não sei pq isso acontece pode ser algum conflito do código que coloquei

Exemplo imagem 3: http://prntscr.com/i2lrag

Alguém pode me ajudar, neste problema também?