Modal of Bootstrap (compatibility issue with mobile devices)

Question

I'm using the modal of bootstrap (Version 2); The default size was not desireable so I applied the following CSS:

#myModal{
    width: 80%;
    margin-left: -40%;
}

But the problem is the content of my modal is not compatible with mobile devices anymore; I mean there is no horizontal scroll bar anymore and the text goes out of content; however if I don't apply the mentioned CSS, it is compatible with mobile devices; but the problem is the width which is too small for my purposes on desktop.

Answer 1

Bootstrap is all about using Media Queries. Since you are only concerned about the display on desktops you should consider using them too! You can play around with the min-width value, but 789px is the usual for iPads.

@media (min-width: 789px) {
          width:80%;
          margin-left: -40%;
       }

Answer 2

If you haven't got to far into your site, and are using bootstrap 2, I would advice converting all your classes to fluid layout. This will help you when using the media queries as mentioned above.

If you are REALLY early in development, I would suggest switching to bootstrap 3 as its better equipped to deal with responsive behavior.

Either way, bootstrap 2 has a responsive.css file which has a good set of media queries to get you going.

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

My advice would be to check re-sizing your browser as well as mobile devices to check your site is holding together ok.