Understanding CSS Breakpoints
CSS breakpoints define the screen widths at which your website’s layout will change. This allows you to create different designs for desktop, tablet, and mobile devices, ensuring a seamless user experience across all platforms.
Divi’s Default Breakpoints
- Desktop: 1024px and above
- Tablet: 768px to 1023px
- Mobile: 0 to 767px
Comprehensive Responsive Targets for Divi
By using these media queries, you can create highly responsive designs that adapt to different screen sizes and orientations, providing an optimal user experience across all devices.
Desktop
Use this media query for styles that apply to all desktop screens, regardless of orientation.
/* CSS for Desktop */
@media only screen and (min-width: 1024px) {
/* add your selectors here */
}Desktop (Portrait)
Use this media query for styles that apply specifically to desktop devices in portrait orientation.
/* CSS for Desktop (Portrait) */
@media only screen and (min-width: 1024px) and (orientation: portrait) {
/* add your selectors here */
}Desktop (Landscape)
Use this media query for styles that apply specifically to desktop devices in landscape orientation.
/* CSS for Desktop (Landscape) */
@media only screen and (min-width: 1024px) and (orientation: landscape) {
/* add your selectors here */
}Tablet
Use this media query for styles that apply to all tablet devices, regardless of orientation.
/* CSS for Tablet */
@media only screen and (min-width: 768px) and (max-width: 1023px) {
/* add your selectors here */
}Tablet (Portrait)
Use this media query for styles that apply specifically to tablet devices in portrait orientation.
/* CSS for Tablet (Portrait) */
@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: portrait) {
/* add your selectors here */
}Tablet (Landscape)
Use this media query for styles that apply specifically to tablet devices in landscape orientation.
/* CSS for Tablet (Landscape) */
@media only screen and (min-width: 768px) and (max-width: 1023px) and (orientation: landscape) {
/* add your selectors here */
}Mobile
Use this media query for styles that apply to all mobile devices, regardless of orientation.
/* CSS for Mobile */
@media only screen and (max-width: 767px) {
/* add your selectors here */
}Mobile (Portrait)
Use this media query for styles that apply specifically to mobile devices in portrait orientation.
/* CSS for Mobile (Portrait) */
@media only screen and (max-width: 767px) and (orientation: portrait) {
/* add your selectors here */
}Mobile (Landscape)
Use this media query for styles that apply specifically to mobile devices in landscape orientation.
/* CSS for Mobile (Landscape) */
@media only screen and (max-width: 767px) and (orientation: landscape) {
/* add your selectors here */
}Desktop & Tablet (Combined)
Use this media query for styles that apply to both desktop and tablet devices, regardless of orientation.
/* CSS for Desktop & Tablet (Combined) */
@media only screen and (min-width: 768px) {
/* add your selectors here */
}Desktop & Tablet (Portrait Combined)
Use this media query for styles that apply to both desktop and tablet devices in portrait orientation.
/* CSS for Desktop & Tablet (Portrait Combined) */
@media only screen and (min-width: 768px) and (orientation: portrait) {
/* add your selectors here */
}Desktop & Tablet (Landscape Combined)
Use this media query for styles that apply to both desktop and tablet devices in landscape orientation.
/* CSS for Desktop & Tablet (Landscape Combined) */
@media only screen and (min-width: 768px) and (orientation: landscape) {
/* add your selectors here */
}Tablet & Mobile (Combined)
Use this media query for styles that apply to both tablet and mobile devices, regardless of orientation.
/* CSS for Tablet & Mobile (Combined) */
@media only screen and (max-width: 1023px) {
/* add your selectors here */
}Tablet & Mobile (Portrait Combined)
Use this media query for styles that apply to both tablet and mobile devices in portrait orientation.
/* CSS for Tablet & Mobile (Portrait Combined) */
@media only screen and (max-width: 1023px) and (orientation: portrait) {
/* add your selectors here */
}Tablet & Mobile (Landscape Combined)
/* CSS for Tablet & Mobile (Landscape Combined) */
@media only screen and (max-width: 1023px) and (orientation: landscape) {
/* add your selectors here */
}Use this media query for styles that apply to both tablet and mobile devices in landscape orientation.
Applying CSS to Divi Elements
You can apply them to specific elements within your Divi layout. Use the Divi builder to select the elements you want to style and then apply the appropriate CSS module.
Customization and Tips
- Adjust Breakpoints: Modify the pixel values in the `@media` queries to match your desired breakpoints.
- Target Specific Elements: Use CSS selectors to target specific elements within your Divi layout.
- Combine Breakpoints: You can combine multiple breakpoints into a single `@media` query for more complex layouts.
- Test on Different Devices: Always test your website on various devices and screen sizes to ensure it looks and functions as expected.
Conclusion
By effectively using CSS breakpoints, you can create responsive designs that adapt to different screen sizes, providing a superior user experience for your visitors. With Divi’s powerful tools and the guidance in this article, you’ll be well-equipped to create stunning and responsive websites.