How to Create: Responsive Floating

Previous Page Clear Floating
Next Page Notification Bar

Learn how to use CSS to create responsive floating elements.

Responsive Floating

Use media queries and set specific screen widths (in pixels) to determine when elements should float:

/* Float to the right on screens with a width of 768 pixels or less */
@media (max-width: 768px) {
  .float-right-sm {
    float: right;
  }
}
/* Float to the right on screens with a width of 769 pixels or more */
@media (min-width: 769px) {
  .float-right-lg {
    float: right;
  }
}

Try It Yourself

Tutorial:CSS Floating