Fluid Container with Max Width Content

Sometimes a website design will call for what appears to be a regular container sitting inside a fluid container. Here is a quick way to achieve that with a dash of CSS.

fluid_container_with_fixed_width_content

Insert a div between your fluid container and your rows, let’s call it .container-max-width. In the CSS set the max-width to 1200px or preferred width. Set the left and right margins to auto if you want it to center.

Now the fluid container will stretch the full width of the window and the content will be limited to 1200px. This comes in handy when the fluid container is going to have nice big background image.

Advertisements

CSS Classes for Hiding on Desktop and Mobile

Here are some CSS classes for hiding a component on desktop and/or mobile. This seems a little dirty since you may ideally want components that are responsive. However, with some designs, you don’t have choice.


// LG =>1200px
@media (min-width:1200px){
   .hide-on-desktop {
      display: none;
   }
}

// MD 992-1199px
@media (min-width:992px) and (max-width:1199px) {
   .hide-on-desktop {
      display: none;
   }
}

// SM 769-991px
@media (min-width:769px) and (max-width:991px) {
   .hide-on-mobile {
      display: none;
   }
}

// XS-Tablet 321-768px
@media (min-width:321px) and (max-width:768px) {
   .hide-on-mobile {
      display: none;
   }
}

// XS-Phone =<320px
@media (max-width:320px) {
   .hide-on-mobile {
      display: none;
   }
}