Changing responsive breakpoints in a theme isn’t a simple thing to do, particularly in this complex theme.
If you look at the theme’s style.css you can see where the current breakpoints are, and then override them as you wish using custom CSS.
For example, on line 2221 you’ll see this section
@media only screen and (min-width: 1140px) {
body,
html {
height: auto;
}
.bcg {
background-repeat: no-repeat;
background-attachment: fixed;
background-position: center center;
background-size: cover;
height: 100%;
width: 100%;
}
section {
height: 600px;
min-width: 768px;
}
.hsContainer {
height: 100%;
position: relative;
overflow: hidden;
width: 100%;
}
}
To change that, copy the CSS into your custom CSS (or a child theme) and modify the number 1140px to something else. You can repeat that as needed for the other elements whose breakpoints you want to change.
Don’t edit the theme files directly, otherwise your changes will be overwritten whenever the theme is updated.
An easy way to add custom CSS is to install the Jetpack plugin and activate the Custom CSS module. You’ll then add your custom CSS in the new stylesheet editor that’ll appear in your dashboard, under Appearance > Edit CSS.
As alternatives, you could either install a standalone custom CSS plugin, or create a child theme.
