Jump to content

Question

Layout Responsivo Desalinhado: Estou criando um site de filmes e a cada momento que incluo algo o layout se estica para a direita ficando impossível de concertar sou novato e não sei onde estou errando me ajudem.

 

Estou tentando criar um site de filmes responsivo mais o layout estar completamente desalinhado estirando a todo momento que incluo alguma  imagem para a direita me ajudem por favor.

 

 

Codigo CSS abaixo:

 

*{
    
  padding: 0px;
  margin: 0px;
}
a{
    text-decoration:none;
    color:#999;
}

body{
    font-family: arial;
    color:#eaeeef;
    background-color: #36454f; /*Fundo Escur0*/ 
    margin-left: -100px;
    margin-top: -16px;


}
.font400{
font-size: 4em;


}
.font350{
font-size: 3.5em;

}     


.font300 {
font-size: 3em;

}

.font200 {
font-size: 2em;

}

.font180 {
font-size: 1.8em;

}

.font12{
    font-size:12px;

}


.font10{
    font-size:10px;
}
.font18{
    font-stretch: 18px;
}
.branca{
    color:#FFFFFF
}


.cinza {
    color: #CBCCCD;
}

.vermelho_1{
    color:#ff0000;
}

ul{
    list-style:none;
}

/*Imagem do Menu*/
img{
    width:35px;
    margin-left: 100px;
    margin-top: 10px;
    
}

input[type="checkbox"]
    
{
    display:none;
}

nav
{
    background-color: rgba(16,16,16,.5);
    width:150px;
    height:100%;
    left: -150px;
    position: absolute;
    transition: all .5s;
    
    
}

input[type="checkbox"]:checked ~ nav
{
    transform: translateX(150px);
}

ul{
    top:80px;
    position:absolute;
    width: 100%;
}

a{
    
    background: block;
    padding:10px 5px;
    color: white;
}

a:hover{
     background-color: rgba();
     color: black;
}

label{
    padding: 15px;
    position: absolute;
    z-index:1;
    /*icone*/
}


/* Formatação de chamada principal da imagem em destaque*/
.chamada{
    background-image: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url(https://img.youtube.com/vi/NOEQ7wVKIew/maxresdefault.jpg);
    background-position: center center; /* Centraliza a imagem no centro da tela*/
    background-repeat: no-repeat;/* Não repete a imagem*/
    background-size: cover; /* Ocupa toda a tela sem distorcer a imagem*/
    background-attachment: fixed;
    height: 100vh; /*100% do view height*/
    display: flex; 
}   

.area_chamada {
    margin: auto;
    margin-bottom:150px;
    text-align: center;

}

h2 {
    margin: 0px;
}

.titulo{
     font-family: 'Open Sans', sans-serif;
     text-transform: uppercase;
     line-height: 1.1em;
     font-weight: 400;
     text-shadow: 2px 3px 0px rgba(0,0,0,.8);
     color: #CBCCCD;
     
     
}

.subtitulo{
    font-family: 'Open Sans', sans-serif;
    text-transform: uppercase;
    line-height: 1.1em;
    font-weight: 400;
    text-shadow: 2px 3px 0px rgba(0,0,0,.8);
    height: 80px;

}

.parte_superior{
    /*banner de 280px na largura e 120px*/
    width: 100vw;
    height: 0px;
    display: flex;
    align-items: center;
    margin-top: 17px;
    margin-left: 50px;


}

/*imagem do logo*/
.logo> img {
     width:250px;
     margin-top: 0px ;
          margin: 160px;
     

}

.pesquisa {
 width:500px;
 height:40px;
 margin:200px auto;
 display: flex;
 margin-top: 80px;
 margin-left: 40px;
 border-bottom-width: 2px;

}

#texto {
 width:520px;
 height:50px;
 float:left;
 font-family:Arial, Helvetica, sans-serif ;
 font-size:18px;
 background: #151515;
 border: #151515;
 border-radius: 6px 0px 0px 6px;
 display: flex;
 color: white;
 justify-content: space-around;
 

}

#texto:focus {
 border: solid 2px #1f1f1f;


}

.btn {
 height:34px;
 width:17px;
 background:#ff0000;
 padding:6px 8px;
 cursor:pointer;
 display: flex;
 margin-top: -10px;
 border: solid 0px #ff0000;
 border-radius: 0px ;
 margin-left: 0px;
 
}

button{
    padding: 12px;
    border-width: 0px;
    border-radius: 0px 6px 6px 0px;
    height: 50px;
    background: #ff0000;
    width: 60px;
}
   
   /*Move todo o Slide*/
.miniaturas{
    
     height: 290px;
         width: 180px;
         display: flex;
         padding: 0px 2%;
         margin-top: -250px;
         margin-left: 90px;
         margin-top: -100px;
}

/*Move todo o menu do slide*/
.horizontal{
       display: flex;
       justify-content: center ;
        margin-left: 70px;
       justify-content: space-around;
       width: 200px;
       color: dimgrey;
       margin-top: 450px;
        
}

.ativo{
    margin:0px;
    color:white;
}
     
   .black_clover> img{
         
         height: 290px;
         width: 180px;
         display: flex;
         margin: 10px;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;

         }

.black_clover > img:hover{
    opacity: 0.2;
}


.one_punch_man> img{

         height: 290px;
         width: 180px;
         display: flex;
         margin: 10px;
          position: relative;
         z-index: 1;
         transition: all 0.5s linear;

  }     

    .one_punch_man > img:hover{
    opacity: 0.2;

}

.Dororo> img{
    height: 290px;
         width: 180px;
         display: flex;
         margin: 10px;
          position: relative;
         z-index: 1;
         transition: all 0.5s linear;

  }     

    .Dororo > img:hover{
    opacity: 0.2;
}

.shingek_3>img{
      height: 290px;
         width: 180px;
         display: flex;
         margin: 10px;
          position: relative;
         z-index: 1;
         transition: all 0.5s linear;


  }     

    .shingek_3 > img:hover{
    opacity: 0.2;

}

.Mob>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin: 10px;
          position: relative;
         z-index: 1;
         transition: all 0.5s linear;


  }     

    .Mob > img:hover{
    opacity: 0.2;


}

.kimetsu_no_yaiba>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .Kimetsu_no_yaiba > img:hover{
    opacity: 0.2;  

}

.figuras {
    display: flex;
    margin-left: 50px;
    justify-content: space-between;
    padding: 4%;
    height: 290px;
    width: 180px;


    
    }
        figure {
              margin: 0px;
              display: flex;


}

figcaption{
    width: 180px;
    height: 290px;
    background-color: black;
    display: flex;
    min-height:290px;
    margin: 10px;
    margin-top: -300px;
    
}


.grana{
    display: flex;
}

.baner{
    padding-top:   100px;
    display: flex;

    
}

/*move o banner e a primeira coluna de animes*/
.bittube>a>img{
    display: flex;
    width: 400px;
    margin: 0px 580px; 
    margin-top: 20px;


}

.posts{
    margin-top:  100px;
    padding: 0px -400px;
    display: flex;
    margin-left: 180px;
    


}

.primeira{
    display: flex;
}


.primeira > ul > li{
    display:inline-block;
    margin-top: 1220px;
    margin-left: 20px;
}


.One_Piece>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .One_Piece> img:hover{
    opacity: 0.2;  

}

.tate_no_yusha>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .tate_no_yusha> img:hover{
    opacity: 0.2;  


}

.naruto_shippuden>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .naruto_shippuden> img:hover{
    opacity: 0.2;  


}

.Nanatsu_no_taizai>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .Nanatsu_no_taizai> img:hover{
    opacity: 0.2;  


}

.dragon_ball_super>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .dragon_ball_super> img:hover{
    opacity: 0.2;  


}

.boku_no_hero_academia>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .boku_no_hero_academia> img:hover{
    opacity: 0.2;  

}
 /*Move toda a segunda coluna de animes*/
.coluna{
    margin-top:   50px ;
    margin-left: 180px;
    display: flex;

}

.segunda{
    display: flex;


}


.boruto>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .boruto> img:hover{
    opacity: 0.2;  


}


.isekai_maou>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .isekai_maou> img:hover{
    opacity: 0.2;  


}


.bleach>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .bleach> img:hover{
    opacity: 0.2;  


}


.fairy_tail>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .fairy_tail> img:hover{
    opacity: 0.2;  

}


.tensei_shitara>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .tensei_shitara> img:hover{
    opacity: 0.2;  

}


.Tokyo_Ghoul>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .Tokyo_Ghoul> img:hover{
    opacity: 0.2;  


}
 /*Move toda a  coluna de séries*/
.coluna_series{
    margin-top:   120px ;
    margin-left: 180px;
    display: flex;

}

.primeira_series{
    display: flex;


}


.primeira_series > ul > li{
    display:inline-block;
    margin-top: 2020px;
    margin-left: 20px;

}


.Atirador>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .Atirador> img:hover{
    opacity: 0.2;  
}


.Game_of_thrones>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .Game_of_thrones> img:hover{
    opacity: 0.2;  
}


.La_casa_de_papel>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .La_casa_de_papel> img:hover{
    opacity: 0.2;  
}


.lucifer>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .lucifer> img:hover{
    opacity: 0.2;  
}


.sons_of_anarchy>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .sons_of_anarchy> img:hover{
    opacity: 0.2;  
}


.vikings>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .vikings> img:hover{
    opacity: 0.2;  


}
 /*Move toda a  coluna de séries*/
.coluna_series2{
    margin-top:   50px ;
    margin-left: 180px;
    display: flex;

}

.segunda_series2{
    display: flex;


}


.segunda_series2 > ul > li{
    display:inline-block;
    margin-top: 2020px;
    margin-left: 20px;

}


.The_purge>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .The_purge> img:hover{
    opacity: 0.2;  

    }


.titans>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .titans> img:hover{
    opacity: 0.2;  

    }


.the_big_bang_theory>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .the_big_bang_theory> img:hover{
    opacity: 0.2;  

    }


.o_último_guardião>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .o_último_guardião> img:hover{
    opacity: 0.2;  

    }


.legends_of_tomorrow>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .legends_of_tomorrow> img:hover{
    opacity: 0.2;  

    }


.chernobyl>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .chernobyl> img:hover{
    opacity: 0.2;  


}
 /*Move toda a  coluna de séries*/
.coluna_fimes{
    margin-top:   120px ;
    margin-left: 180px;
    display: flex;

}

.segunda_filmes{
    display: flex;


}


.segunda_filmes > ul > li{
    display:inline-block;
    margin-top: 2820px;
    margin-left: 20px;

}


.avangers_Age>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .avangers_Age> img:hover{
    opacity: 0.2;  

    }


.capitan_marvel>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .capitan_marvel> img:hover{
    opacity: 0.2;  

}


.capitao_america>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .capitao_america> img:hover{
    opacity: 0.2;  

    }


.guerra_civil>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .guerra_civil> img:hover{
    opacity: 0.2;  

    }

.doutor_estranho>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .doutor_estranho> img:hover{
    opacity: 0.2;  

    }


.hulk_o_inacreditavel>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .hulk_o_inacreditavel> img:hover{
    opacity: 0.2;  

    }

.coluna_fimes1{
    margin-top:   50px ;
    margin-left: 180px;
    display: flex;

}

.segunda_filmes1{
    display: flex;


}


.segunda_filmes1> ul > li{
    display:inline-block;
    margin-top: 2820px;
    margin-left: 20px;

}

.iron_man>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .iron_man> img:hover{
    opacity: 0.2;  

    }

    .thor>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .thor> img:hover{
    opacity: 0.2;  

    }

    .a_lenda_do_golem>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .a_lenda_do_golem> img:hover{
    opacity: 0.2;  

    }

    .maligno>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .maligno> img:hover{
    opacity: 0.2;  

    }

    .as_trapaceiras>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .as_trapaceiras> img:hover{
    opacity: 0.2;  

    }

    .homem_de_ferro2>img{
    height: 290px;
         width: 180px;
         display: flex;
         margin:10px ;
         position: relative;
         z-index: 1;
         transition: all 0.5s linear;  

  }     

    .homem_de_ferro2> img:hover{
    opacity: 0.2;  

    }


    .rodape{
        padding: 25px;
        color: white
        font-size:1.5em;
        display: flex;
        padding-top:   3600px;
        padding-left: 350px;


    }

    .rodape li{
        margin-right:20px;
        padding-top: 50px;
        
    }

    .parceria{
        display: flex;
        padding-top:   3600px;
        padding-left: 350px;

        }

    .parceria li{

        margin:-20px 10px;
        display:flex;

 

 

 

<<<<<<<<Codigo Html abaixo>>>>>>>>

Share this post


Link to post
Share on other sites

0 answers to this question

Recommended Posts

There have been no answers to this question yet

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

  • Similar Content

    • By frdca10
      Estou personalizando a página "minha conta" do woocomerce com o elementor.
      Nesta pagina coloquei alguns icones que funcionam como botões que direcionam o usuário para as paginas especificas (editar enrereço, editar conta, logout, dashboard).
       
      ja está funcionando e ao clicar em cada icone, a pagina é direcionada e o endereço do navegador muda e fica assim dependendo da situação:
       
      https://meusite/minha-conta/edit-account/
      https://meusite/minha-conta/orders/
      https://meusite/minha-conta/edit-address/
       
      Como eu posso fazer para que cada icone assuma uma cor especifica dependendo do endereço que foi acessado?
       
      Hoje todos os icones ficam da mesma cor. Gostaria de uma indicação visual de qual pagina esta sendo acessada
    • By leonardorafaeldev
      Boa noite pessoal estou com um problema que o icone do meu site não aparece no mobile segue uma foto do problema o meu codigo esta assim
       
      <!-- icones -->   <link href="icones/favicon.ico" rel="icon">   <link href="icones/favicon.ico" rel="shortcut icon">    <link rel="apple-touch-icon" sizes="57x57" href="icones/apple-icon-57x57.png">   <link rel="apple-touch-icon" sizes="60x60" href="icones/apple-icon-60x60.png">   <link rel="apple-touch-icon" sizes="72x72" href="icones/apple-icon-72x72.png">   <link rel="apple-touch-icon" sizes="76x76" href="icones/apple-icon-76x76.png">   <link rel="apple-touch-icon" sizes="114x114" href="icones/apple-icon-114x114.png">   <link rel="apple-touch-icon" sizes="120x120" href="icones/apple-icon-120x120.png">   <link rel="apple-touch-icon" sizes="144x144" href="icones/apple-icon-144x144.png">   <link rel="apple-touch-icon" sizes="152x152" href="icones/apple-icon-152x152.png">   <link rel="apple-touch-icon" sizes="180x180" href="icones/apple-icon-180x180.png">   <link rel="icon" type="image/png" sizes="192x192"  href="icones/android-icon-192x192.png" >   <link rel="icon" type="image/png" sizes="36x36" href="icones/android-icon-36x36.png">   <link rel="icon" type="image/png" sizes="48x48" href="icones/android-icon-48x48.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/android-icon-96x96.png">   <link rel="icon" type="image/png" sizes="144x144" href="icones/android-icon-144x144.png">   <link rel="icon" type="image/png" sizes="72x72" href="icones/android-icon-72x72.png">   <link rel="icon" type="image/png" sizes="32x32" href="icones/favicon-32x32.png">   <link rel="icon" type="image/png" sizes="96x96" href="icones/favicon-96x96.png">   <link rel="icon" type="image/png" sizes="16x16" href="icones/favicon-16x16.png">   <link rel="manifest" href="icones/manifest.json">   <meta name="msapplication-TileColor" content="#ffffff">   <meta name="msapplication-TileImage" content="icones/ms-icon-144x144.png">   <meta name="theme-color" content="#ffffff">   <meta charset="utf-8">   <meta content="width=device-width, initial-scale=1.0" name="viewport">
    • By Vanessa Andrade
      Bom dia Pessoal!
       Gostaria da ajuda de vocês, não tenho conhecimento aprofundado em html e css e a tray não quer me dar suporte para alteração desta fonte dizendo que é padrão.....
      Enfim a fonte está minuscula mal dá para entender o que está escrito, e não acho onde altero...
      https://www.lacee.com.br/loja/extra.php?loja=495949&amp;pagina=afiliados
       

×

Important Information

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