Responsive CSS example for Ipad and Smart Phones

One thing that has kept those of us in Website Development busy over the last few years is to make sure clients websites work in all browser.

One go to tool I've been using is this Website Screenfly - test your website in different sizes.


The following snippet of CSS code is to help you write specific CSS for different sized browser you want to target.  In this example I isolate Ipad ( horizontal ) and smartphones ( horizontal ) for my changes.

@media handheld, only screen and (max-width: 1280px) and (min-width: 650px) {
.tp-bullets {
font-size: 18px !important;
}
}

@media handheld, only screen and (max-width: 649px) and (min-width: 240px) {

 .tp-bullets {
font-size: 15px !important;
padding-left: 15px
}