Responsive breakpoints - Vanilla Success

/* * These styles apply ONLY to the header and footer assets. */ * { padding: 0; margin: 0; box-sizing: border-box; } .footer { background: #f5f5f6; color: #555a62; font-size: 14px; line-height: 1.5; padding: 18px 0; } .footer-wrap { padding-left: 18px; padding-right: 18px; max-width: 1236px; margin: 0 auto; } .footer a { color: #0291db; } .footer a:hover { color: #0276b3; } .footer-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin: -3px; } .footer-col { padding: 0 3px; } .footer-col-copyRight { justify-content: flex-start; } .footer-col-logo { justify-content: flex-end; } .footer-col-copyRight, .footer-col-logo { flex: 1; display: flex; } .logo { width: 120px; height: 28px; opacity: 0.6; } @media screen and (max-width: 768px) { .footer-row { display: block; } .footer-col { width: 100%; text-align: center; margin: 6px 0; } .footer-col:first-child { margin-top: 0; } .footer-col:last-child { margin-bottom: 0; } .footer-col-copyRight, .footer-col-logo { justify-content: center; } .logo { margin: 0 auto; } } /*# sourceMappingURL=styles.css.map */

Within the new Foundation theming system, the theme banner and content banner can have different responsive breakpoints. It means that you can upload different size images for your mobile, tablet and desktop banner.

There is a toggle on the new Theming System that can be turn on.

Turning on, you can upload images for mobile and tablet devices.

Image breakpoints

Having 3 different images, you make the decision in how you want them to display in the 3 different sizes. Depending on the purpose, the format of your images could be .jpg, .gif, or .png. We recommended JPG because you can optimize it.

Desktop

To ensure that your full width images look good across any desktop device, the recommended size is 1920x 322px.

Tablet devices

For tablet, the recommended size is 768x255 pixels.

Mobile devices

For mobile, the recommended size is 414x120 pixels.

Those are suggested sizes, you have to test to see how it's going to look like with your image.