Jump to content
Sign in to follow this  
Lozczn

Criei um layout com menu de imagens porem quando coloco responsive ele

Recommended Posts

Criei um layout com menu de imagens porem quando coloco responsive ele não fica legal, gostaria de saber se tem como substituir a imagem conforme a tela diminui para texto. basicamente isso.

Share this post


Link to post
Share on other sites

 

Você pode usar no css este código:

@media (min-width: 500px)  // pode usar min ou max width e vá controlando os pixels como quiser
{
     código css equanto min-width for 500px
}

Então eu tenho isso no código mas a questão é que a imagem,teria que ser trocada por texto mesmo, ficaria mais complexo trocando a imagem por um texto.

Share this post


Link to post
Share on other sites

Então eu tenho isso no código mas a questão é que a imagem,teria que ser trocada por texto mesmo, ficaria mais complexo trocando a imagem por um texto.

 

Mas e se você usar dois @media, um para a imagem com max-width: 700px e outro para o texto com min-width: 700px. AI enquanto for maior que 700 ele mostra a imagem, quando for menor, mostra o texto.

 

CSS

@media (max-width: 700px) {
    .image{
        display: none;
    }
}
@media (min-width: 700px) {
    .text{
        display: none;
    }
}

HTML

<img class="image" src="imagem.png" alt="" />
<span class="text">alguma coisa</span>

Este código troca a imagem pelo texto, mas eu não sei se a sua intenção é isso que eu fiz.

Share this post


Link to post
Share on other sites

Quando você diz "coloco responsive" o que isso significa? Talvez você não tenha entendido muito bem o conceito, o que está te atrapalhando em buscar a solução para o problema. Abraços.

Share this post


Link to post
Share on other sites

Quando você diz "coloco responsive" o que isso significa? Talvez você não tenha entendido muito bem o conceito, o que está te atrapalhando em buscar a solução para o problema. Abraços.

Como assim atrapalho?

Share this post


Link to post
Share on other sites

 

Então eu tenho isso no código mas a questão é que a imagem,teria que ser trocada por texto mesmo, ficaria mais complexo trocando a imagem por um texto.

 

Mas e se você usar dois @media, um para a imagem com max-width: 700px e outro para o texto com min-width: 700px. AI enquanto for maior que 700 ele mostra a imagem, quando for menor, mostra o texto.

 

CSS

@media (max-width: 700px) {
    .image{
        display: none;
    }
}
@media (min-width: 700px) {
    .text{
        display: none;
    }
}

HTML

<img class="image" src="imagem.png" alt="" />
<span class="text">alguma coisa</span>

Este código troca a imagem pelo texto, mas eu não sei se a sua intenção é isso que eu fiz.

 

vlw irmão era basicamente isso que procurava , e tão facil assim nunca imaginei .

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By JoãoRicardo.Lima
      Olá pessoal.
      Pessoal como eu faço o roteamento dos meus arquivos no meu projeto, pois sempre que inicio o meu servidor embutido do php em um diretório especifico, ele obviamente não "enxerga" as outras pastas, por exemplo. Eu tenho minha pasta com as views, mas qualquer link que eu coloco em uma view para ser redirecionado para ou view, o servidor não consegue achar o caminho, pois ele não conhece as outras pasta. Como eu faria este roteamento?.
    • By acneto.frc
      Boa tarde a todos!
      Estou trabalhando em uma aplicação Node-Express-Html-Bootsrap-Javascript-mysql, etc...
      Arquitetura MVC.
      Tenho um determinado formulário (document) que antes de renderizá-lo faço uma chamada a função sql da model e recebo como retorno um objeto sql (result).
      Ao renderizar o formulário passo o objeto como parâmetro para o html.
      Dentro do htm tenho acesso aos elementos do objeto os quais apresento em uma tabela.
      Depois disso preciso que uma função javascript seja executada mas não sei como fazer para que a função tenha acesso ao objeto.
      Anexo segue uma imagem como as fases de execução do programa
      Abraços a todos e obrigado!

    • By Pitag346
      Olá pessoal, tudo bem ? Estou com um probleminha, espero que me ajudem...
       
      Seguinte, tenho uma tabela onde faço a exibição de alguns dados, tais como:
       
      NOME, 
      QUANTIDADE, 
      VALOR
       
      Eu quero buscar o valor, em outra tabela e exibir dentro desse while. Porem, ele está exibindo em todos os resultados.
      Seguinte, 
      Cada usuário que efetuar uma vendo do produto tal, é salvo na tabela VENDIDOS, onde o mesmo armazena o "ticket_promote_id". 
      Ao fazer o while das vendas, quero pegar o valor do produto em outra tabela com o "ticket_promote_id" que mencionei acima, porem ao fazer isso, ele me retorna o valor de um produto em todos os resultados do while. 
       
      Alguém sabe por que ? Segue meu código abaixo:
      $valueTotali = 0; while($dados = mysqli_fetch_assoc($sql_promoters)){ $user = $dados['id']; $sqlIngress = $conn->query("SELECT * FROM vendidos WHERE ticket_promote_id = '$user' "); $cont = $sqlIngress->num_rows; if($cont > 0){ $dadosIngress = mysqli_fetch_assoc($sqlIngress); $loteId = $dadosIngress['ticket_lote_id']; $sqlLote = $conn->query("SELECT * FROM ingress WHERE lote_id = '$loteId' "); while($data = mysqli_fetch_assoc($sqlLote)){ $valueTotali += $data['lote_preco']; } }  
      Segue a imagem da tabela com o mesmo valor sendo replicado em todos os resultados:

       
       
    • By Marcos PP
      Alguém poderia me dar um exemplo de como pegar este retorno em Json para gravar em um banco de dados, a questão do banco e conexões não e necessário, apenas como pegar os retornos para trabalhar com eles


      Esta e a API
      http://click.omie.com/developer-0o843564k
    • By dutopfave
      Boa Tarde, estou criando um sistema de newsletter para um cliente, e ele quer ter um controle de quando o cliente viu o e-mail e também quando clico no botão da promoção, só que o link de clica eu consigo faze mais não sei como posso fazer quando o cliente visualiza somente o e-mail e contabiliza no banco de dados.
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.