Bootstrap Change css depending on mobile layout

Question

i want to know how i can change the css of my web in bootstrap,depending on the screen size,because i want change the text sizes and images too,but i dont know how,thanks. here its my code:

HTML:



  
   



    
    Summa



   
   
   
   
    


    

    
    
  
    
           













        
  

      
      
        
      
    
  
 
      

       




  
    
       
        
        
        
            
        
    

    

   


     
    

    





    
    
      Brindamos soluciones y conectamos empresas 
      Te invitamos a conocer nuestras especialidades y demas servicios
      

      Mantenimiento
      Soporte
      Venta

      
      
      


      Ofrecemos diferentes planes de mantenimiento para sus productos
      Verifique el estado de sus productos online y envie dudas o consultas.
      Adquiera en linea cualquiera de nuestros productos por medio de nuestra tienda interactiva





     

     




       
     Quienes somos?
    Ingeniería Integrada, nace en el año 2004 como una iniciativa de un grupo de profesionales del sector de las telecomunicaciones de crear empresa y dar mantenimiento predictivo, preventivo y correctivo, a equipos de telecomunicaciones y tarjetas; Con el tiempo fue ampliando sus servicios a equipos de Energía, Radio y Televisión hasta lograr en el año 2005 cubrimiento en estaciones de comunicaciones celulares.
Con la experiencia y equipos de última tecnología fuimos irrumpiendo en otros sectores de la economía nacional logrando abarcar otros mercados como el transporte masivo, la industria y la salud.
Hemos ido creciendo, logrando reconocimientos a nivel nacional como empresa ingenio en la ciudad de Medellín, dado que contamos con un laboratorio de Innovación y desarrollo que nos ha permitido diseñar equipos especializados, enfocados a la necesidad de cada cliente y distinciones como Gestora en la Participación de Proyectos.

CSS:

#video1{
min-height: 100%;
  min-width: 100%;
  visibility: visible;
}


#logo{
  position: absolute;
height:70%;
  width: 70%;
  display: inline-block;

  margin: auto;
   top: 0; left: 0; bottom: 0; right: 0;



}
#colorletra{
color:darkslategray;
    padding-top: 8%;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 3em;
}
#colorletra2{
color:darkslategray;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 2em;
  padding-top: 10px;
    padding-bottom: 20px;
}
#colorletra3{

    color:darkslategray;
  text-align: center;
  font-family: 'Raleway', sans-serif;
  font-size: 2em;
    padding-bottom: 20px;
}
#colorletra4{

    color:darkslategray;
 text-align: center;
  text-align-last: center;  
  font-family: 'Raleway', sans-serif;
  font-size: 1em;
    padding-top: 50px;
}
#colorletra5{

    color:whitesmoke;
 text-align: justify;
  text-align-last: center;  
  font-family: 'Raleway', sans-serif;
  font-size: 1.6em;
    padding-top: 50px;
}
#alcentro{
text-align: center;
}
.talleres{

  background-image: radial-gradient(at top left, #3A8FDC 0%, #87D7CD 100%);
  padding: 50px;
  padding-bottom: 200px;
}
#descripciones{
font-family: 'Quicksand', sans-serif;

}
#tamanoicono{
width: 10em;
}
.quien{
    background-image: radial-gradient(at top left, #5C258D 0%, #4389A2 100%);
}
#proy{
font-family: 'Sniglet', cursive;
  font-size: 4em;
  color: aliceblue;
}
#somos{
     color:whitesmoke;
 text-align: center;

  font-family: 'Raleway', sans-serif;
  font-size: 10em;
    padding-top: 25%;

}



a {

    padding-top: 60px;
}
a span {
    position: absolute;
    top: 90%;
    left: 50%;
    width: 40px;
    height: 70px;
    margin-left: -15px;
    border: 2px solid #fff;
    border-radius: 50px;
    box-sizing: border-box;
}
a span::before {
    position: absolute;
    top: 10px;
    left: 50%;
    content: '';
    width: 6px;
    height: 6px;
    margin-left: -3px;
    background-color: #fff;
    border-radius: 100%;
    -webkit-animation: sdb 2s infinite;
    animation: sdb 2s infinite;
    box-sizing: border-box;
}
@-webkit-keyframes sdb {
    0% {
        -webkit-transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        -webkit-transform: translate(0, 30px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
@keyframes sdb {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    40% {
        opacity: 1;
    }
    80% {
        transform: translate(0, 40px);
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}
   .fullscreen { height: 100vh; }



.homepage-hero-module {
    border-right: none;
    border-left: none;
    position: relative;
}
.no-video .video-container video,
.touch .video-container video {
    display: none;
}
.no-video .video-container .poster,
.touch .video-container .poster {
    display: block !important;
}
.video-container {
    position: relative;
    bottom: 0%;
    left: 0%;
    height: 100%;
    width: 100%;
    overflow: hidden;
    background: #000;
}
.video-container .poster img {
    width: 100%;
    bottom: 0;
    position: absolute;
}
.video-container .filter {
    z-index: 100;
    position: absolute;
    background: rgba(0, 0, 0, 0.4);
    width: 100%;
}
.video-container video {
    position: absolute;
    z-index: 0;
    bottom: 0;
}
.video-container video.fillWidth {
    width: 100%;
}

And i read about css in the bootstrap documentation but i dont find any information about that,help please.

Abdulla · Accepted Answer

Use media queries. Change width according to you device width. Put the class/Id/elements of the font container in the media curly braces.

@media (max-width: 600px) {
.facet_sidebar {
    display: none;
}}

Bootstrap Change css depending on mobile layout

Answers (2)

Related Questions