Custom Media Querys For All Devices

Custom Media Querys For All Devices

/*custom media querys*/

@media only screen and (min-device-width: 320px) and (max-device-width: 480px) {
     
}
@media only screen and (min-device-width: 480px) and (max-device-width: 765px) {
 
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
   

}
@media only screen and (min-device-width: 1024px) and (max-device-width: 1200px) {
   
}
@media only screen and (min-device-width: 1200px) and (max-device-width: 1700px) {
 
   
}
@media only screen and (min-device-width: 1700px) and (max-device-width: 1920px) {
   
     
    }

shahzad_samejo@yahoo.com

List image on center css code

List  image on center css code

HTML CODE

 <div class="flex-item">
          <img src="images/mclaren.png" class="img-responsive" />
 </div>

.flex-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 300px;
    border: 1px solid black;
    background-color: #eee;
}

For cross-browser compatibility for display: flex and align-items, you can add the older flexbox syntax as well:

display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -ms-flexbox;
display: flex;
-webkit-flex-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;

shahzad_samejo@yahoo.com

Bootstrap RTL CSS

Bootstrap RTL CSS

use only bootstrap.min.rtl

https://github.com/AbdullahDiaa/Bootstrap-RTL




shahzad_samejo@yahoo.com