Breakpoints for Responsive Design

Learn how to customize layouts for other devices and what the editor will do for you

rate limit

Code not recognized.

About this course

Learn how to modify your desktop designs to ensure your sites look great across all types of devices.

This course includes a series of videos that covers a number of different foundational topics including: what breakpoints are, how to switch between them in Duda's UI, foundational information about columns, layout considerations, how to hide specific sections on specific devices. 

This course is the 4th course in the Build a site with Editor 2.0 path**, however, this course can be taken by itself if you're looking to learn more about how to make your sites responsive. 

At the end of this course, you'll be able to:

  • understand what breakpoints are
  • know how to switch between the different breakpoints in the editor
  • manipulate the layout and order elements are displayed in the tablet and mobile versions of your sites
  • hide sections on specific breakpoints

**For those following along and building the carpentry site:

Know this course does not contain steps for you to complete. There is a short lesson about configuring the tablet and mobile layouts for the carpentry site found in the last course in the path: [Optional] Build more sections for carpentry site

 

For a better experience, you should have:

  • Free (or paid) Duda account — sign up
  • Chrome or Safari browser
  • Headphones or speakers

Curriculum45 min course

  • Key concepts
  • Responsive Design
  • Understanding breakpoints
  • Rearranging columns
  • Reordering elements within a column
  • Layout properties for sections
  • Layout properties for columns
  • Additional edits per breakpoint
  • Deleting and hiding elements
  • Wrap up
  • Summary
  • How'd it go? (survey)
  • On to the next course

About this course

Learn how to modify your desktop designs to ensure your sites look great across all types of devices.

This course includes a series of videos that covers a number of different foundational topics including: what breakpoints are, how to switch between them in Duda's UI, foundational information about columns, layout considerations, how to hide specific sections on specific devices. 

This course is the 4th course in the Build a site with Editor 2.0 path**, however, this course can be taken by itself if you're looking to learn more about how to make your sites responsive. 

At the end of this course, you'll be able to:

  • understand what breakpoints are
  • know how to switch between the different breakpoints in the editor
  • manipulate the layout and order elements are displayed in the tablet and mobile versions of your sites
  • hide sections on specific breakpoints

**For those following along and building the carpentry site:

Know this course does not contain steps for you to complete. There is a short lesson about configuring the tablet and mobile layouts for the carpentry site found in the last course in the path: [Optional] Build more sections for carpentry site

 

For a better experience, you should have:

  • Free (or paid) Duda account — sign up
  • Chrome or Safari browser
  • Headphones or speakers

Curriculum45 min course

  • Key concepts
  • Responsive Design
  • Understanding breakpoints
  • Rearranging columns
  • Reordering elements within a column
  • Layout properties for sections
  • Layout properties for columns
  • Additional edits per breakpoint
  • Deleting and hiding elements
  • Wrap up
  • Summary
  • How'd it go? (survey)
  • On to the next course