Bootstrap and CSS: Media Queries


Media Queries?

One difficulty with designing websites these days is that people have lots of different size devices. This can make website design tricky at best. Luckily, Bootstrap actually takes most of this into account, although sometimes you have to hook into some of the abilities of Bootstrap that are not quite as obvious. Other times, even with Bootstrap, you may have to add some extra stuff to deal with these different sizes.

The purpose of this page is simply to discuss a few things that I have found after deploying the different pages here to the web and discovered they didn't look quite like what I expected.

Bootstrap Columns

One extremly nice feature of Bootstrap is that you can work with the columns to handle difference size screens. However, you have to choose your options wisely.

One place that really tripped me up was my image gallery (see "Ken's Image Gallery" in the menu). I have an image on the left side of a modal form, and a description column on the right. The default setting I was using, with Bootstrap breaking a screen up into twelve columns was to have the left side at 7 columns, and the right at 5. This allowed the image to take a bit over half the dialog, and still leave the text.

This is all great and wonderful on a full size screen, but as soon as you go to smaller screen sizes (iPad, etc.), things can get wonky. By default what Boostrap does is it takes those columns and if there isn't enough room, moves the right side under the left.

This was interesting, but I discovered (or perhaps re-discovered, as one my my Udemy courses on working with Bootstrap talked about it, but we didn't do a lot with it), that the columns in Boostrap can be defined for different size screens.

For example with the modal form I am using to display the images in the image gallery code, my default settings in the modal-body of the dialog were:

               <div class="modal-body">
                  <div class="row">
                     <div class="col-md-7 modal-image">
                        <!-- an image will be passed here -->
                     </div>
                     <div class="col-md-5 modal-text">
                        <!-- and text will be shown here -->
                     </div>
                  </div> <!-- / row -->
               </div> <!-- / modal-body -->
            

The class "col-md-7" for the left part of the dialog, and "col-md-5" for the right worked great for normal size screens (there is an "lg" for "large", here I am using "md" for "medium" which works for larger screens as well). As soon as I tried to display this on my iPad, however, the text was under the image, not as wide, and it went scrolling off the bottom of the dialog. Eeeeep!

The resolution was easier than I expected, however. I added a new class for each of the sides of the dialog: "col-sm-7" and "col-sm-5" (sm for "small"). I also made some minor changes in my CSS file which I will get to when I point out the media-query part (looking at the size of the media) below. However, this left me with the columns at the same ratio I wanted, and I was very happy indeed. Then I tried to look at this on my iPhone (SE), and was apalled as it didn't deal with that.

I tried adding "col-xs-7" and "col-xs-5" (xs for "extra small"), but somehow no matter what I did with the css file, I could not manage to limit the text to stay on the dialog (even though I tried using the same settings as with the iPad size). That was very frustrating, but I changed it to: "col-xs-12" and simply left out an "xs" column for the right side. In the css file, I set the text to not display at all. (Again we'll look at that ...)

What I ended up with for this form is:

               <div class="modal-body">
                  <div class="row">
                     <div class="col-md-7 col-sm-7 col-xs-12 modal-image">
                        <!-- an image will be passed here -->
                     </div>
                     <div class="col-md-5 col-sm-5 modal-text">
                        <!-- and text will be shown here -->
                     </div>
                  </div> <!-- / row -->
               </div> <!-- / modal-body -->
            

With the changes made in the css file as well, it seems to have turned out pretty well. I am a bit flummoxed by the xs column size, and it's possible I may find a fix for it at some point, but in the meantime, everything else seems to work.

Media Queries

Media queries are a way to deal with the different size screens, and can be pretty tricky. If you use Google (or whatever search engine on the web) you can find a lot of information with the keywords "css media query". What I decided to do was go for three basic changes based on screen sizes, using the "max-width" setting. This is done in a CSS file with:

               @media( max-width: 992px )
            

The setting above really is for smaller laptop computers or computers with a lower resolution.

I also used the following:

Again you can search the web and get specific sizes for lots of devices out there, but I wouldn't want to try to develop for each single type of device -- that would be insane, so I went with relatively standard sizes. I did note that the iPhone 6 (and I assume 7) is at 667px, and smaller phones at 480px. These are all width in portrait mode, and I chose not to try to deal with landscape mode for any of them. OMG, you could go crazy!

An example of what I needed to do is shown below, this is the notebook size (992px):

               @media( max-width: 992px )
               {
                  /* Bootstrap Navbar */
                  .navbar-header
                  {
                     float: none;
                  }
                  
                  .navbar-left, .navbar-right
                  {
                     float: none !important;
                  }
                  
                  .navbar-toggle
                  {
                     display: block;
                  }
                  
                  .navbar-collapse
                  {
                     border-top: 1px solid transparent;
                     box-shadow: inset 0 1px 0 rgba( 255, 255, 255, 0.1);
                  }
                  
                  .navbar-fixed-top
                  {
                     top: 0;
                     border-width: 0 0 1px;
                  }
                  
                  .navbar-collapse.collapse
                  {
                     display: none !important;
                  }
                  
                  .navbar-nav
                  {
                     float: none;
                     margin-top: 7.5px;
                  }
                  
                  .navbar-nav > li
                  {
                     float: none;
                  }
                  
                  .navbar-nav > li > a
                  {
                     padding-top: 10px;
                     padding-bottom: 10px;
                     border-right: none;
                  }
                  
                  .collapse.in
                  {
                     display: block !important;
                  }
                  
                  /* popovers in general */
                  .popover
                  {
                     font-size: 16px !important;
                  }

                  /* User Profile Modal Dialog */
                  #userModal .modal-dialog
                  {
                     width: 725px;
                     overflow-y: auto;
                  }
                  
                  #userModal .modal-body
                  {
                     max-height: 700px;
                     overflow-y: auto;
                  }
                  
                  /* for the modal form for image gallery*/
                  #imageModal .modal-dialog
                  {
                     width: 850px !important;
                  }
                  
                  #imageModal .modal-body
                  {
                     max-height: 700px;
                     max-width: 825px;
                     margin-bottom: 5px;
                  }
                  
                  #imageModal .modal-body .modal_img
                  {
                    max-height: 650px;
                    max-width: 100%;
                  }
                  
                  /* because of the way the Bootstrap responsiveness code works,
                     with the grid, the software attempts to put the text column
                     under the image, which makes things ... interesting. */
                  #imageModal .modal-body .modal-txt,
                  #imageModal .modal-body .modal-text
                  {
                     margin-top: 5px;
                     max-height: 650px;
                     max-width: 100%;
                  }
               }
            

Note that I put in some comments. I modified the height and width of the dialogs, and the way some of the items display. The same kinds of changes were done, except for the Bootstrap navbar, for the other screen sizes. If interested, you can download the complete CSS file below.

There is a lot that can be done. You can change the font sizes for parts of the pages served based on the size of the devices viewing them, and you can display or not individual elements of pages if you have appropriate classes or ids that you can access them by in your CSS file.

One website I looked at suggested having different CSS files for each media size you wanted to use, and then at the top of the page the tags used to insert stylesheets can be set to look at the media size. I chose not to do that, but I can see for some sites this might be a useful way to handle things.

Summary

This took a lot of futzing, trying things and I still have some experimentation going on, for example, for my CMS, I may want to remove the logo from the header (set the display to "none") for a smaller size screen, or I may simply want to drop the size down for smaller screens. This is an ongoing experiment. The nice thing is that Boostrap handles a lot of the responsive side of things itself.

If you want to download the CSS file that is being used for these pages, click the link here: [gsp.css], and open it in your favorite editor. The media queries are at the bottom.