Solucionado (ver solução)
Solucionado
(ver solução)
5
respostas

Duvida

Temos um site, e subi algumas atualizações colocando efeito Parallax no Body Porem para Mobile fica totalmente desconfigurada vou encaminhar o print de como está para você ter uma noção (Drive) : Caso precisar o site é www.coesma.com.br

https://drive.google.com/open?id=17OJKTCZYZT4R7UD0Md2UkEWXj7FMsoJX

Quais ferramentas posso utilizar como classes do Botstrap para deixa-ló responsivo para mobile?

5 respostas

Victor, bom dia!

Você pode usar a classe img-fluid caso esteja usando o Bootstrap 4. Já se você estiver usando o Bootstrap 3 use a classe img-responsive. Pelo que eu vi o efeito parallax está sendo aplicado no mobile também, só falta a imagem se ajustar ao tamanho do dispositivo.

Bom dia, então utilizei a classe img-fluid porem não deu muito certo, porque o problema está no NAVBAR e na escrita grande, o img-fluid é tratamento para imagem, porque a imagem que está atrás esta responsiva é mais o NAVBAR e a escrita grande,

Escrita "INOVAÇÃO E TECNOLOGIA PARA O TRÂNSITO" Como está o CSS :

.img-parallax {
  width:100%;
  display:table;
    height:auto;
    padding: 100px 0;
    color:#fff;
    -webkit-background-size:cover;
    -moz-background-size:cover;
    background-size:cover;
    -o-background-size:cover;
  z-index: -1;
  position: absolute;
  top: 0;
  left: 50%;

NavBar: HTML

<div  class="topnav fixed-top" >
<img   align="left" src="img/coesma.svg"  width="200" height="52" alt="Coesma" ></a>
  <a   rel="noopener" href="#services">Soluções</a>
  <a  rel="noopener" href="#portfolio">Serviços</a>
  <a rel="noopener" href="#about">Empresa</a>
  <a  rel="noopener" href="#contact">Contato</a>
</div>

CSS

/* Add a black background color to the top navigation */
.topnav {
    background-color: #333;
    overflow: hidden;
}

/* Style the links inside the navigation bar */
.topnav a {
    float: right;
    color: #f2f2f2;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
    font-size: 17px;
}

/* Change the color of links on hover */
.topnav a:hover {
    background-color:#4CAF50;
    color: #f2f2f2;
}

/* Add a color to the active/current link */
.topnav a.active {
    background-color: #4CAF50;
    color: white;
}

Vitor você pode usar a media query para alterar o tamanho da fonte de acordo com o tamanho da tela do dispositivo. Exemplo:

/* Menor que o padrão 960 (dispositivos e navegadores) */
@media only screen and (max-width: 959px) {
    h1.brand-heading{
        font-size: 10px;
    }
}

/* Tablets em modo retrato  (dispositivos e navegadores)*/
@media only screen and (min-width: 768px) and (max-width: 959px) {
    h1.brand-heading{
        font-size: 12px;
    }
}

/* Todos os tamanho de dispositivos móveis (dispositivos e navegadores)*/
@media only screen and (max-width: 767px) {
    h1.brand-heading{
        font-size: 14px;
    }
}

/* Mobile retrato e tablet paisagem  (dispositivos e navegadores) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
    h1.brand-heading{
        font-size: 9px;
    }
}

/* Mobile retrato e  Mobile paisagem (dispositivos e navegadores) */
@media only screen and (max-width: 479px) {
    h1.brand-heading{
        font-size: 7px;
    }
}

Espero ter ajudado e bons estudos!

solução!

Deu certo amigo obrigado.

De nada! Qualquer dúvida só mandar aqui no fórum..

Bons estudos!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software