Ajuda com conteudo Responsivo

Olá Emerson, uma dica rápida sobre isso é na sua div onde está a imagem, ou na própria imagem, se não estiver dentro de uma div, e dar o display: nome; Ela vai sumir. Faça isso na sua @media.

Qq coisa fala aqui, blz?!

Bons estudos.

.index.html

<div class="banda4">
                  < img src="img/show4.png" alt="Banda Marilane Trio" style="float:right;width:275px"> 
             < /div>

.css

.banda4{
    display: block;
    background-repeat: no-repeat;
    position: absolute; 
    width: 80mm;
    height: 19mm;
    margin-top: -20%;
    margin-left: 135%;
    transition: all 0.5s;
    cursor:pointer;
}

.banda4:hover{
    -webkit-filter: drop-shadow(-5px 7px 14px rgba(255, 255, 255, 0.5));
    filter: drop-shadow(-5px 7px 14px rgba(243, 25, 170, 0.5));
}


/* responsive-dey */
 @media(max-width:768px){
  .banda4{
        display: block;
    }}

Oie, Daniela, obrigado pelo apoio. Eu adicionei display:nome; no @media. Se eu insiro o comando display:nome na div onde tá a imagem, nada acontece. Seria isso:

html

<div class="banda4" display="nome">
                  <img src="img/show4.png" alt="Banda Marilane Trio" style="float:right;width:275px"> 
             </div>

.css

<div class="banda4" display="nome">
                /* responsive-dey */
 @media(max-width:768px){
.banda4{
        display: nome;
    }
             <  /div>

Emerson, uma dica importante para ficar mais claro os seus códigos, tem um botão no editor de texto (aqui no forum) que tem o simbolo "</>", seria legal se você colocasse seus códigos lá dentro, é feito justamente pra isso.

Agora em relação ao seu problema, o que a Daniela falou está certo, ela só escreveu errado, ficaria:

CSS

@media(max-width:768px) {
    .banda4 {
        display: none;
    }
}

Repare que é NONE, ao invés de NOME.

Outra coisa, uma boa prática é não colocar estilo diretamente no HTML, não é semântico e pode lhe dar problemas futuros de manutenção de aparência.

Espero ter ajudado, qualquer dúvida pode postar que se eu souber eu tentarei responder.

oie, Alan, estou começando agora. rs

Obrigado pelas dicas.

Bom! Não estou conseguindo fazer com que as imagens não apareçam em resolução definida dentro do @media. Acho que se deve pelo fato deu ter inserido alguns estilos na html, como você mesmo comentou. Veja só:

<img src="img/logo-carnaval-2.png" alt="Carnaval no Mandacá" style="float:right;width:300px">

Eu tentei pegar estes valores de alinhamento e de dimensão e atribuir à minha folha de estilo, assim:

<img src="img/logo-carnaval-2.png" alt="Carnaval no Mandacá">

.logo-2{
    display: block;
    background-repeat: no-repeat;
    position: absolute; 
    width: 300mm;
    height: 19mm;
    margin-top: 1%;
    margin-left: 20%;

}

Mas quando eu faço isso, a imagem explode e, independente dos valores que eu atribuo dentro das atributos de logo-2, nada acontece.

Emerson, tenta remover tudo que é estilo do HTML e coloca em seus respectivos seletores através do CSS.

Vou explicar para você algumas coisas.

Os seletores é como se tivessem uma quantidade de força, assim como o professor explicou nas aulas, é como se:

• Seletores html (div, main, body, etc..) tivessem força 1;
• Seletores de classe tivessem força 5;
• Seletores de id tivessem força 10; e
• Escrever inline (direto no html) tivessem força 100.

Escrever inline tira todo o propósito de estilização em cascata que você tem dentro de um arquivo css. Uma das idéias que você tem é de escrever propriedades de um elemento e reaproveitar elas para usar depois, como em comandos de @media, onde você só escreve o que você quer mudar (sem precisar reescrever todas as propriedades de novo).

Quando você utiliza estilos diretamente inline os comandos css não tem força suficiente para reescrever a propriedade e então acaba não tendo efeito.

Uma boa prática é sempre utilizar as classes em elementos que você deseja estilizar, pois aí você está trabalhando com seletores de força não tão fraca e não tão forte, sendo mais facil de dar manutenção.

Se você remover tudo do html e passar para o css e mesmo assim tiver problemas, tenta colocar a propriedade "float: none;" dentro do seletor equivalente dentro do @media.

Emerson eu peço que, se seu problema foi solucionado, marque o tópico como Resolvido, caso contrário diga se tem ainda alguma dúvida que eu (ou quem souber) tentará ajudar.